Image Cropper
TsgcHTMLComponent_ImageCropper: プロフィール写真やスキャンした書類向けの、ブラウザーで動作する画像トリミングです。ユーザーは写真をトリミング、ズーム、回転、反転したり、ページの 4 つの角を指定して真っすぐな長方形を得たりでき、サーバーはコードやディスクが見る前に結果を確認します。Delphi、C++ Builder、.NET で利用できます。
TsgcHTMLComponent_ImageCropper: プロフィール写真やスキャンした書類向けの、ブラウザーで動作する画像トリミングです。ユーザーは写真をトリミング、ズーム、回転、反転したり、ページの 4 つの角を指定して真っすぐな長方形を得たりでき、サーバーはコードやディスクが見る前に結果を確認します。Delphi、C++ Builder、.NET で利用できます。
結果の形状とサイズを設定して、レンダリングします。ユーザーは画像を選択、ドロップ、貼り付けるか、写真を撮って、サーバーへのリクエストなしで編集します。保存は元のピクセルから結果をレンダリングし、ブラウザーで JPEG、PNG、WebP にエンコードして OnCrop に送信し、UploadFolder は一意の名前でファイルを保持します。
TsgcHTMLComponent_ImageCropper、写真モードと書類モードがあります
ツールバー、エディター、ライブプレビューを備え、コンポーネントに埋め込まれたスクリプトと CSS から提供され、外部ライブラリも CDN も不要です
Delphi, C++ Builder, .NET
512 x 512 の JPEG 結果を持つ円形のトリミングです。サーバーは画像を確認し、一意の名前でフォルダーに書き込み、保存されると TargetSelector がページに新しいアバターを表示します。
uses
sgcHTML_Component_ImageCropper;
oCropper := TsgcHTMLComponent_ImageCropper.Create(Self);
oCropper.Name := 'AvatarCropper';
oCropper.HTMXEngine := sgcHTMXEngine1;
oCropper.CropperID := 'avatarCropper';
oCropper.CropShape := icsCircle;
oCropper.OutputWidth := 512;
oCropper.OutputHeight := 512;
oCropper.UploadFolder := 'C:\Portal\avatars';
oCropper.UploadURL := '/avatars/'; // サーバーでそのフォルダーにマッピングします
oCropper.TargetSelector := '#avatar';
oCropper.OnCrop := CropperCrop;
oTemplate.BodyContent := '<img id="avatar" src="/avatars/default.jpg" alt="Avatar">' +
oCropper.HTML;
procedure TForm1.CropperCrop(Sender: TObject; const aInfo: TsgcHTMLImageCropInfo;
aStream: TStream; var aAccept: Boolean; var aErrorMessage: string);
begin
// aInfo.URL は UploadURL にファイルの一意の名前を足したものです
StoreAvatarURL(CurrentUserID, aInfo.URL); // データベース
end;@* Views/Profile/Photo.cshtml *@
@model ProfileModel
<img id="avatar" src="/avatars/current.jpg" alt="Avatar">
<sgc-image-cropper name="avatar" cropper-id="avatarCropper"
crop-shape="circle" output-width="512" output-height="512"
upload-folder="wwwroot/avatars" upload-url="/avatars/"
target-selector="#avatar" aria-label="Change your photo"
on-crop="Model.CheckCrop" />using esegece.sgcWebSockets;
// Tag Helper の OnCrop: 画像はサーバーが確認済みです
public void CheckCrop(object sender, TsgcHTMLImageCropInfo aInfo, Stream aStream,
ref bool aAccept, ref string aErrorMessage)
{
if (!User.Identity!.IsAuthenticated)
{
aAccept = false;
aErrorMessage = "Sign in to change your photo";
return;
}
Profiles.SetAvatar(User, aInfo.URL);
}
// コードで作る同じトリミング、書類スキャナー用
var cropper = new TsgcHTMLComponent_ImageCropper();
cropper.Name = "ScanCropper";
cropper.HTMXEngine = engine;
cropper.Mode = TsgcHTMLImageCropperMode.icmDocument;
cropper.DocumentFilter = TsgcHTMLImageCropFilter.icflBlackWhite;
cropper.OutputFormat = TsgcHTMLImageCropFormat.icfPNG;
cropper.UploadFolder = @"C:\Portal\scans";
template.BodyContent = cropper.HTML;アバターやカバー用の写真エディターと、ページやレシート用のスキャナーを、1 つのコンポーネントで。
画像の上に 8 つのハンドルを持つ長方形があります。ボックスをドラッグして移動し、ハンドルでサイズを変更しますが、ソースの MinCropSize ピクセルを下回ることはありません。AspectRatio はボックスを 16:9 などの比率に固定し、AspectRatios はツールバーのプリセットを列挙し、既定は「自由」、1:1、4:3、3:4、16:9 です。
CropShape の icsCircle は、アバター用の円形マスクを表示し、ボックスを 1:1 に固定します。PNG と WebP の結果は角が透明になり、JPEG の結果には BackgroundColor が適用されます。結果のライブサムネイルは、円の場合は丸く、エディターの隣に表示されます。
ボタン、マウスホイール、ピンチで 0.5 倍から 16 倍までズームし、ボックスの外で画像をドラッグしてパンします。90 度ずつ左右に回転し、「傾き補正」スライダーで -45 度から 45 度まで水平を合わせ、左右または上下に反転し、「リセット」で画像全体に戻ります。
Mode の icmDocument では、ユーザーが 4 つの角を、ページ、レシート、ホワイトボードの角にドラッグし、4 倍ズームのルーペが表示されます。結果は、元のピクセルをバイリニアサンプリングして、四角形を真っすぐな長方形に変換したものです。自動の端検出はなく、ユーザーが角を配置します。
「オリジナル」「グレースケール」「白黒」、影に対応する適応しきい値、そしてすべての色チャンネルのコントラストを引き伸ばす「補正」です。DocumentFilter は初期のフィルターを設定し、ユーザーはツールバーで変更できます。
ファイルを選択する、ドロップする、クリップボードから貼り付ける、または安全なページでフロントまたはリアのカメラ (FacingMode) で写真を撮ります。ImageURL は、現在のアバターのような初期画像を読み込みます。写真の EXIF の向きが適用されるため、スマートフォンで撮った縦向きの写真もまっすぐになります。
大きな画像を縮小コピーから編集した場合でも、結果は常に元のピクセルからレンダリングされます。OutputFormat は JPEG、PNG、WebP を選び、OutputQuality は品質、OutputWidth、OutputHeight、MaxOutputSize はサイズを設定します。ブラウザーが結果を再エンコードするため、元の EXIF と GPS のデータは含まれません。
すべての操作をキーボードで行えます。矢印キーはトリミングボックスまたはフォーカスされた角を 1 ピクセル (Shift で 10) 動かし、Alt+矢印はボックスのサイズを変更し、+ と - はズーム、R は回転です。トリミングボックスとすべての角は値のテキスト付きのスライダーで、polite のライブリージョンがトリミングサイズと保存の結果を通知します。トリミングは data-bs-theme="dark" とモーションの軽減に従います。
最もよく使うメンバーです。
サーバーはブラウザーを決して信頼しません。種類は JPEG、PNG、WebP のいずれかで OutputFormat と一致する必要があり、データはデコードの前後に MaxResultSize と照合され、マジックバイトはその種類のものでなければならず、ヘッダーから読み取った幅と高さは MaxOutputSize の範囲内で送信されたサイズと等しくなければなりません。トリミングデータのすべての数値は範囲チェックされ、ソース名からはパスの部分が取り除かれます。
OnCrop(Sender, aInfo, aStream, aAccept, aErrorMessage) は検証済みの情報と画像のバイト列を受け取ります。画像を自分で保存するか、URL を変更するか、aAccept を False にして独自のテキストを設定してください。これはリクエストのスレッドで発生し、そこでは sgcHTMLRequestSession がセッションを返します。
UploadFolder を使うと、サーバーは送信された名前ではなく、種類の拡張子を付けた 32 桁の 16 進文字による一意の名前を選び、画像が受理された後にのみファイルを書き込みます。SavedFileName と、UploadURL にその名前を足した URL が設定されます。コンポーネントはフォルダーを配信しません。サーバーで UploadURL をそのフォルダーにマッピングしてください。
FieldName は、結果を data: URL として受け取る非表示の input を指定するため、周囲のフォームが他のフィールドと一緒に送信します。TargetSelector は一致するすべての img 要素を更新し、DOM イベント sgc-image-cropped は、保存のたびに URL、幅、高さ、種類とともにバブリングします。エンジンも ActionURL もない場合、保存はブラウザー内で結果を適用するだけです。
サーバーのヘッダーリーダーは公開されているため、独自のコードでも同じルールで画像を確認できます。sgcHTMLImageInfo(aStream, aType, aWidth, aHeight) は、PNG、JPEG、WebP 画像の種類とサイズを、デコードせずに読み取ります。.NET では sgcHTMLImageCropperHelpers の静的メソッドです。
window.sgcImageCropper は scan、instances、get、load、loadFile、setCrop、reset、result、save を提供します。スクリプトは、htmx の差し替えの後も含めて、ページのすべてのトリミングを初期化し、1 つのページの複数のトリミングがそれを共有します。
Razor ビューでは、<sgc-image-cropper> Tag Helper がトリミングをレンダリングし、保存は UseSgcHtml のコンポーネントイベントエンドポイントに送信されます。属性のリストにない値は、ページのレンダリング時に InvalidOperationException をスローし、Kestrel の MaxRequestBodySize が引き続きリクエストの上限になります。
Demos\60.HTML\01.RunTime\33.ImageCropper は sgc Profile Studio で、ポート 8135 のサーバーに 3 つのトリミングがあります。OnCrop で保存する円形のアバター、白黒フィルターを備え、すべてのスキャンを UploadFolder に保持する書類スキャナー、FieldName でフォームと一緒に送信する 16:9 の商品カバーです。デザイン時、Lazarus、.NET の各バージョンも同様の内容です。
| オンラインで試すeSeGeCe デモサーバーでライブ動作する 画像トリミング デモをご覧ください。 | 開く | |
| オンラインヘルプこのコンポーネントの完全な API リファレンスと使い方ガイドです。 | 開く | |
| FileUpload コンポーネントファイルを multipart フォームデータとして送信する、ドラッグ&ドロップのアップロードゾーンです。 | 開く | |
| Camera Scanner コンポーネントデバイスのカメラでバーコードと QR コードをスキャンします。 | 開く | |
| すべての sgcHTML コンポーネント80 以上のコンポーネントの機能マトリックスをすべてご覧いただけます。 | 開く | |
| 無料体験版のダウンロード30 日間の体験版には 60.HTML のデモプロジェクトが含まれます。 | 開く | |
| 価格完全なソースコード付きの Single、Team、Site ライセンス。 | 開く |