Cropper.Blazor下載Cropper.Blazor源代碼下載

Cropper.Blazor

其他類別

v1.3.2

下載

Cropper.Blazor

Cropper.Blazor是一個包裹Cropper.js版本1.6.2的組件

構建和運行測試部署到github頁面部署到Nuget

Glazor WebAssembly / Server，與MAUI，MVC和其他框架的混合動力的最強大的圖像裁剪工具。

Cropper.Blazor是在大型Web應用程序中構建交互式圖像裁剪和操縱功能的重要組成部分。這個多功能的大火庫使開發人員能夠將直覺的圖像裁剪功能直接集成到其大型項目中，從而為用戶提供無縫且響應迅速的圖像編輯體驗。

演示

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	✔️

支持的.NET 8.0，.NET 7.0，.NET 6.0版本的這些Web平台：
- 大火WebAssembly
- Blazor服務器
- Glazor Server與MVC的混合動力車
- 毛伊島大麻混合動力
注意：如果您對MAUI項目依賴性有問題：
- dotnet workload update +重建了項目。如果那無濟於事，請嘗試以下有關覆蓋軟件包的步驟
- 例如： <PackageReference Include="Microsoft.Extensions.Logging.Abstractions" VersionOverride="7.0.1" />

Cropper的關鍵特徵和各個方面。 Blazor套餐包括

大火集成：Cropper.Blazor是專門為大型應用設計的，使開發人員可以輕鬆地將圖像裁剪功能納入其大麻零件和頁面。
拖動交互：用戶可以輕鬆地拖動裁剪區域，以精確選擇圖像的所需部分。這種直觀的相互作用方法可確保准確有效的裁剪。
旋轉支持：Cropper.Blazor包括旋轉所選圖像區域的能力，使用戶完全控制其裁剪內容的方向。
縱橫比控制：開發人員可以定義用於裁剪的自定義長寬比，以確保所得圖像保持特定比例。這對於需要標準化圖像維度的應用程序特別有價值。
變焦功能：cropper.blazor允許用戶放大進出圖像以微調其裁剪選擇，從而確保精確的結果。
數據檢索：庫提供了檢索有關裁剪區域的詳細信息的方法，例如坐標和尺寸。這些數據可以輕鬆捕獲並用於進一步處理或圖像上傳。
自定義：Cropper.blazor提供了廣泛的配置選項，使開發人員能夠調整裁剪體驗以匹配其大型應用程序的視覺樣式和用戶界面。
跨瀏覽器的兼容性：該軟件包與各種現代的Web瀏覽器兼容，確保在不同平台上保持一致的功能和用戶體驗。
文檔：Cropper.Blazor伴隨著全面的文檔和實踐示例，簡化了集成過程並幫助開發人員充分利用其功能。
開源：Cropper.Blazor是開源軟件，可在個人和商業大麻項目中免費使用。

Cropper.Blazor簡化了大型應用程序中圖像裁剪和編輯的實現，從而增強用戶參與度並實現動態圖像操縱。無論您是開發基於外彙的圖像編輯器，個人資料圖片上傳器，還是任何需要圖像裁剪的其他應用程序，Cropper.blazor都是一個有價值的軟件包，可簡化開發過程並豐富您的應用程序的功能。

安裝

 dotnet add package Cropper.Blazor

用法

導入自定義元素：

 @ using Cropper . Blazor . Components

將以下內容添加head index.html （客戶端 - jlazor webAssembly，julazor maui）或_Host.cshtml （服務器端 - Blazor Server，MVC，帶有Blazor Server）

< 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，增加單個傳入HUB消息的最大收益（默認為32KB），然後將MAP Signalr映射到您的路徑。但是，如果您的圖像太大，則最大值的變量應增加到所需的值。例如：

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

 app . MapBlazorHub ( ) ;

然後在剃須刀文件中使用它：

< 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文件中使用它

您可以使用執行腳本覆蓋Cropper JavaScript模塊，該腳本可以替換6個事件處理程序（onready，onready，oncropstart，oncropmove，oncropend，oncropend，ongrop，onzoom），例如在javaScript中覆蓋onzoom回調：

 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 ) ;
        }
    } ;
} ;