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