Cropper.Blazor
v1.3.2
Cropper.blazor adalah komponen yang membungkus cropper.js versi 1.6.2
Alat pemangkasan gambar paling kuat untuk Blazor WebAssembly / Server, hybrid dengan Maui, MVC dan kerangka kerja lainnya.
Cropper.blazor adalah komponen penting untuk membangun fitur penanaman dan manipulasi gambar interaktif dalam aplikasi web Blazor. Perpustakaan Blazor serbaguna ini memberdayakan pengembang untuk mengintegrasikan fungsionalitas pemangkasan gambar intuitif secara langsung ke dalam proyek Blazor mereka, menawarkan pengguna pengalaman pengeditan gambar yang mulus dan responsif.
| Cropper.blazor | .BERSIH | Mendukung |
|---|---|---|
| - | .NET 3.1 | Tidak didukung |
| - | .Net 5 | Tidak didukung |
| 1.1.x | .Net 6 | ✔️ |
| 1.2.x | .Net 6 & .net 7 | ✔️ |
| 1.3.x | .Net 6 & .net 7 & .net 8 | ✔️ |
Versi .NET 8.0, .NET 7.0, .NET 6.0 untuk platform web ini:
Catatan: Jika Anda memiliki masalah dengan dependensi proyek Maui:
dotnet workload update + membangun kembali proyek. Jika itu tidak membantu, coba langkah di bawah ini tentang paket override<PackageReference Include="Microsoft.Extensions.Logging.Abstractions" VersionOverride="7.0.1" /> Cropper.blazor merampingkan implementasi pemangkasan dan pengeditan gambar dalam aplikasi Blazor, meningkatkan keterlibatan pengguna dan memungkinkan manipulasi gambar dinamis. Apakah Anda sedang mengembangkan editor gambar berbasis Blazor, pengunggah gambar profil, atau aplikasi lain yang memerlukan penanaman gambar, cropper.blazor adalah paket berharga yang menyederhanakan proses pengembangan dan memperkaya kemampuan aplikasi Anda.
dotnet add package Cropper.Blazor
Impor Elemen Kustom:
@ using Cropper . Blazor . Components Tambahkan yang berikut ke index.html (sisi klien-Blazor WebAssembly, Blazor Maui) atau _Host.cshtml (Sisi Server-Server Blazor, MVC dengan Blazor Server) di head
< link href = " _content/Cropper.Blazor/cropper.min.css " rel = " stylesheet " /> Tambahkan yang berikut ke index.html atau _Host.cshtml di dalam body
< script src = " _content/Cropper.Blazor/cropper.min.js " ></ script > Tambahkan yang berikut ini ke bagian yang relevan dari Program.cs
using Cropper . Blazor . Extensions ; builder . Services . AddCropper ( ) ;Selain itu, Anda dapat mengubah jalur ke modul cropperjsinterop.min.js jika karena alasan tertentu terletak di luar folder root server sebagai berikut:
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"
} )Juga untuk server-side (Blazor Server atau MVC dengan Blazor Server) Anda perlu menambahkan konfigurasi sinyalr, tingkatkan maksimum receivemessageze dari satu pesan hub yang masuk tunggal (default adalah 32kb) dan peta sinyalr ke jalur Anda. Namun, jika gambar Anda terlalu besar, variabel maksimum receivemessageSze harus ditingkatkan ke nilai yang diinginkan. Misalnya:
builder . Services . AddServerSideBlazor ( )
. AddHubOptions ( options =>
{
options . MaximumReceiveMessageSize = 32 * 1024 * 100 ;
} ) ; app . MapBlazorHub ( ) ;Dan kemudian gunakan dalam file Razor (misalnya):
< 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 >Dan kemudian menggunakannya di file *.razor.cs
Anda dapat mengganti modul JavaScript Cropper dengan skrip eksekusi yang dapat menggantikan 6 penangan acara (onready, onCropstart, onCropMove, Oncropend, Oncrop, Onzoom), seperti menimpa panggilan balik OnZoom di 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 ) ;
}
} ;
} ;Analisis tanda tangan onready, oncropstart, oncropmove, oncropend, oncrop, OnZoom event handlers:
ObjectReferensi ke komponen cropper dasar.
CustomEventMewakili peristiwa cropper.
StringCropper.BlazorID korelasi adalah pengidentifikasi unik yang ditambahkan ke interaksi pertama (permintaan masuk) untuk mengidentifikasi konteks dan diteruskan ke semua komponen yang terlibat dalam aliran transaksi.
Pasti perlu memberi tahu aturan ini dalam Blazor:
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>
