Cropper.Blazor

cropper.blazor

cropper.blazorは、 cropper.jsバージョン1.6.2を包むコンポーネントです。

Blazor WebAssembly / Serverの最も強力な画像トリミングツール、MAUI、MVC、およびその他のフレームワークとのハイブリッド。

cropper.blazorは、Blazor Webアプリケーションでインタラクティブな画像トリミングと操作機能を構築するための不可欠なコンポーネントです。この用途の広いBlazor Libraryは、開発者が直感的な画像トリミング機能をBlazorプロジェクトに直接統合できるようにし、ユーザーにシームレスで応答性の高い画像編集体験を提供します。

デモ

• cropperblazor.github.io/demo

API

• cropperblazor.github.io/api

例

• cropperblazor.github.io/examples/cropperusage

前提条件

cropper.blazor	。ネット	サポート
-	.NET 3.1	サポートされていません
-	.NET 5	サポートされていません
1.1.x	.NET 6	✔✔️
1.2.x	.NET 6＆.NET 7	✔✔️
1.3.x	.NET 6＆.NET 7＆.NET 8	✔✔️

• これらのWebプラットフォーム用の.NET 8.0、.NET 7.0、.NET 6.0バージョンをサポートしています。

  • Blazor WebAssembly
  • Blazorサーバー
  • MVCを備えたBlazor Serverハイブリッド
  • マウイブレザーハイブリッド

  注：マウイプロジェクトの依存関係に問題がある場合：

  • dotnet workload update +プロジェクトの再構築。それが役に立たない場合は、Overrideパッケージについて以下のステップを試してください
  • たとえば、パッケージをオーバーライドする： <PackageReference Include="Microsoft.Extensions.Logging.Abstractions" VersionOverride="7.0.1" />

cropper.blazorパッケージの主要な機能と側面が含まれます

• Blazor Integration：Cropper.Blazorは、Blazorアプリケーション向けに特別に設計されているため、開発者は画像のトリミング機能をBlazorコンポーネントとページに簡単に組み込むことができます。
• ドラッグアンドリソースインタラクション：ユーザーは、作物の領域を簡単にドラッグしてサイズ変更して、画像の目的の部分を正確に選択できます。この直感的な相互作用方法は、正確で効率的な収穫を保証します。
• ローテーションサポート：Cropper.Blazorには、選択した画像領域を回転させる機能が含まれており、ユーザーがトリミングされたコンテンツの向きを完全に制御できます。
• アスペクト比制御：開発者は、トリミングのカスタムアスペクト比を定義でき、結果の画像が特定の割合を維持するようにします。これは、標準化された画像寸法を必要とするアプリケーションにとって特に価値があります。
• ズーム機能：cropper.blazorを使用すると、ユーザーは画像をズームインおよびズームアウトして、作物の選択を微調整して、正確な結果を保証できます。
• データ取得：ライブラリは、座標や寸法などのトリミングされた領域に関する詳細な情報を取得する方法を提供します。このデータは、さらなる処理または画像のアップロードのために簡単にキャプチャおよび使用できます。
• カスタマイズ：Cropper.Blazorは、幅広い構成オプションを提供し、開発者がブレザーアプリケーションの視覚スタイルとユーザーインターフェイスに合わせてトリミングエクスペリエンスを調整できるようにします。
• クロスブラウザー互換性：パッケージは、さまざまな最新のWebブラウザーと互換性があり、さまざまなプラットフォームで一貫した機能とユーザーエクスペリエンスを確保します。
• ドキュメント：cropper.blazorには、包括的なドキュメントと実用的な例が伴い、統合プロセスを簡素化し、開発者がその機能を最大限に活用できるようにします。
• オープンソース：Cropper.Blazorは、オープンソースソフトウェアであり、個人および商業用の両方のブレザープロジェクトで無料で使用できます。

Cropper.Blazorは、Blazorアプリケーション内の画像トリミングと編集の実装を合理化し、ユーザーのエンゲージメントを強化し、動的な画像操作を可能にします。 Blazorベースの画像エディタ、プロフィール写真のアップローダー、または画像のトリミングを必要とするその他のアプリケーションを開発しているかどうかにかかわらず、cropper.blazorは、開発プロセスを簡素化し、アプリケーションの機能を強化する貴重なパッケージです。

インストール

 dotnet add package Cropper.Blazor

使用法

カスタム要素のインポート：

 @ using Cropper . Blazor . Components

index.html （クライアントサイド - Blazor WebAssembly、Blazor Maui）または_Host.cshtml （サーバー側 - Blazorサーバー、MVC、Blazor Server付きMVC）に以下を追加しますhead

< link href = " _content/Cropper.Blazor/cropper.min.css " rel = " stylesheet " />

bodyにindex.htmlまたは_Host.cshtmlに次のものを追加します

< script src = " _content/Cropper.Blazor/cropper.min.js " ></ script >

Program.csの関連セクションに以下を追加します

 using Cropper . Blazor . Extensions ; 

 builder . Services . AddCropper ( ) ;

さらに、何らかの理由でサーバールートフォルダーの外側にある場合は、次のように、cropperjsinterop.min.jsモジュールへのパスを変更できます。

• cropperjsinterop.min.jsモジュールへの内部パスをオーバーライドします：

 builder . Services . AddCropper ( new CropperJsInteropOptions ( )
{
    DefaultInternalPathToCropperModule = "<YourPath>/_content/Cropper.Blazor/cropperJsInterop.min.js"
} )

• cropperjsinterop.min.jsモジュールへの完全なグローバルパスをオーバーライドします。

 builder . Services . AddCropper ( new CropperJsInteropOptions ( )
{
    IsActiveGlobalPath = true ,
    GlobalPathToCropperModule = "<StartUrlWithPath>/_content/Cropper.Blazor/cropperJsInterop.min.js"
} )

また、サーバー側（Blazor ServerまたはBlazor Serverを使用したMVC）の場合は、構成SignalRを追加する必要があります。単一の着信ハブメッセージ（デフォルトは32kb）の最大レシーブ出来事を増やし、Pathに信号をマッピングします。ただし、画像が大きすぎる場合は、最大値の変数を希望の値に増やす必要があります。例えば：

 builder . Services . AddServerSideBlazor ( )
    . AddHubOptions ( options =>
    {
        options . MaximumReceiveMessageSize = 32 * 1024 * 100 ;
    } ) ; 

 app . MapBlazorHub ( ) ;

そして、それをRazorファイルで使用します（たとえば）：

< CropperComponent
  Class = " cropper-container "
  ErrorLoadImageClass = " cropper-error-load "
  @ref = " CropperComponent "
  OnCropStartEvent = " OnCropStartEvent "
  OnCropEndEvent = " OnCropEndEvent "
  OnCropEvent = " OnCropEvent "
  OnZoomEvent = " OnZoomEvent "
  OnCropMoveEvent = " OnCropMoveEvent "
  OnReadyEvent = " OnCropReadyEvent "
  OnLoadImageEvent = " OnLoadImageEvent "
  Src = " @Src "
  InputAttributes = " @InputAttributes "
  ErrorLoadImageSrc = " @_errorLoadImageSrc "
  IsErrorLoadImage = " @IsErrorLoadImage "
  OnErrorLoadImageEvent = " OnErrorLoadImageEvent "
  Options = " Options "
  IsAvailableInitCropper = " IsAvailableInitCropper " >
</ CropperComponent >

次に、 *.razor.csファイルで使用します

JavaScriptのOnzoomコールバックをオーバーライドするなど、6つのイベントハンドラー（Ondeady、Oncropmove、Oncropmove、Oncropend、Oncrop、Onzoom）を置き換えることができる実行スクリプトで、Cropper JavaScriptモジュールをオーバーライドできます。

 window . overrideOnZoomCropperEvent = ( minZoomRatio , maxZoomRatio ) => {
    window . cropper . onZoom = function ( imageObject , event , correlationId ) {
		const jSEventData = this . getJSEventData ( event , correlationId ) ;
		
		const isApplyPreventZoomMinRatio = ( minZoomRatio != null ) && ( minZoomRatio > event . detail . ratio ) ;
		const isApplyPreventZoomMaxRatio = ( maxZoomRatio != null ) && ( event . detail . ratio > maxZoomRatio ) ;

		if ( isApplyPreventZoomMinRatio || isApplyPreventZoomMaxRatio ) {
            event . preventDefault ( ) ;
        }
        else {
            imageObject . invokeMethodAsync ( 'CropperIsZoomed' , jSEventData ) ;
        }
    } ;
} ;

準備ができている署名、Oncropstart、Oncropmove、Oncropend、Oncrop、Onzoomイベントハンドラーの分析：

ImageObject

• タイプ： Object

ベースクロッパーコンポーネントへの参照。

イベント

• タイプ： CustomEvent

クロッパーイベントを表します。

CorrelationId

• タイプ： String
• デフォルト： Cropper.Blazor

相関IDは、コンテキストを識別するために最初のインタラクション（着信要求）に追加され、トランザクションフローに関与するすべてのコンポーネントに渡される一意の識別子です。

これらのルールをBlazorで間違いなく伝える必要があります：

 await JSRuntime ! . InvokeVoidAsync ( "window.overrideCropperJsInteropModule" , MinZoomRatio , MaxZoomRatio ) ; 

貢献

1. フォーク！
2. 機能ブランチを作成： git checkout -b feature/<my-new-feature>
3. あなたの変更をコミット： git commit -m 'Add some feature'
4. ブランチへのプッシュ： git push origin feature/<my-new-feature>
5. プルリクエストを送信する：d