Cropper.Blazor
v1.3.2
Cropper.blazor 는 Cropper.js 버전 1.6.2를 감싸는 구성 요소입니다.
Blazor WebAssembly / Server 용 가장 강력한 이미지 자르기 도구, Maui가있는 하이브리드, MVC 및 기타 프레임 워크.
Cropper.blazor는 Blazor 웹 응용 프로그램에서 대화식 이미지 자르기 및 조작 기능을 구축하는 데 필수적인 구성 요소입니다. 이 다재다능한 Blazor 라이브러리는 개발자가 직관적 인 이미지 자르기 기능을 블레이저 프로젝트에 직접 통합하여 사용자에게 원활하고 반응이 좋은 이미지 편집 경험을 제공 할 수 있도록합니다.
| 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 버전 :
참고 : Maui 프로젝트 종속성에 문제가있는 경우 :
dotnet workload update + 프로젝트를 재건했습니다. 도움이되지 않으면 아래 단계를 사용해보십시오.<PackageReference Include="Microsoft.Extensions.Logging.Abstractions" VersionOverride="7.0.1" /> Cropper.blazor는 Blazor 응용 프로그램 내에서 이미지 자르기 및 편집 구현을 간소화하여 사용자 참여를 향상시키고 동적 이미지 조작을 가능하게합니다. Blazor 기반 이미지 편집기, 프로필 사진 업 로더 또는 이미지 자르기가 필요한 기타 응용 프로그램을 개발하든 Cropper.blazor는 개발 프로세스를 단순화하고 응용 프로그램의 기능을 풍부하게하는 귀중한 패키지입니다.
dotnet add package Cropper.Blazor
사용자 정의 요소 가져 오기 :
@ using Cropper . Blazor . Components index.html 에 다음을 추가하십시오 (클라이언트 측-블레이저 webassembly, blazor maui) 또는 _Host.cshtml (Server-Side-Blazor Server, Blazor Server가 포함 head MVC).
< 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 모듈로의 경로를 변경할 수 있습니다.
builder . Services . AddCropper ( new CropperJsInteropOptions ( )
{
DefaultInternalPathToCropperModule = "<YourPath>/_content/Cropper.Blazor/cropperJsInterop.min.js"
} ) builder . Services . AddCropper ( new CropperJsInteropOptions ( )
{
IsActiveGlobalPath = true ,
GlobalPathToCropperModule = "<StartUrlWithPath>/_content/Cropper.Blazor/cropperJsInterop.min.js"
} )또한 서버 측 (Blazor Server 또는 Blazor Server가있는 MVC)의 경우 구성 신호를 추가하고 단일 수신 허브 메시지 (기본값은 32KB)의 최대 receiveMessagesize를 늘리고 경로에 MAP 신호를 늘려야합니다. 그러나 이미지가 너무 크면 최대 receivemessagesize 변수를 원하는 값으로 늘려야합니다. 예를 들어:
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 개의 이벤트 핸들러 (Onready, OncropStart, OnCropMove, OnCropend, OnCrop, OnCrop, Onzoom)를 대체 할 수있는 Execution 스크립트로 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 ) ;
}
} ;
} ;OnReady, OncropStart, OnCropMove, OnCropend, OnCrop, Onzoom 이벤트 처리기의 서명 분석 :
Object기본 작물 구성 요소에 대한 참조.
CustomEventCropper 이벤트를 대표합니다.
StringCropper.Blazor상관 ID는 컨텍스트를 식별하기 위해 첫 번째 상호 작용 (수신 요청)에 추가되는 고유 식별자이며 트랜잭션 흐름에 관여하는 모든 구성 요소로 전달됩니다.
블레이저에서 이러한 규칙을 분명히 말해야합니다.
await JSRuntime ! . InvokeVoidAsync ( "window.overrideCropperJsInteropModule" , MinZoomRatio , MaxZoomRatio ) ; git checkout -b feature/<my-new-feature> 를 만듭니다git commit -m 'Add some feature'git push origin feature/<my-new-feature>
