Cropper.Blazor
v1.3.2
Cropper.blazor ist eine Komponente, die sich um cropper.js Version 1.6.2 wickelt
Das leistungsstärkste Image -Schnitt -Tool für Blazor WebAssembly / Server, Hybrid mit Maui, MVC und anderen Frameworks.
Cropper.blazor ist eine wesentliche Komponente zum Erstellen interaktiver Bildfunktionen und Manipulationsfunktionen in Blazor -Webanwendungen. Diese vielseitige Blazor -Bibliothek ermöglicht Entwicklern, intuitive Image -Cropping -Funktionen direkt in ihre Blazor -Projekte zu integrieren, und bietet den Benutzern ein nahtloses und reaktionsschnelles Bildbearbeitungserlebnis.
| Cropper.blazor | .NETTO | Unterstützung |
|---|---|---|
| - - | .NET 3.1 | Nicht unterstützt |
| - - | .NET 5 | Nicht unterstützt |
| 1.1.x | .NET 6 | ✔️ |
| 1.2.x | .Net 6 & .net 7 | ✔️ |
| 1.3.x | .Net 6 & .net 7 & .net 8 | ✔️ |
Unterstützt .NET 8.0, .NET 7.0, .NET 6.0 -Versionen für diese Webplattformen:
Hinweis: Wenn Sie ein Problem mit Maui -Projektabhängigkeiten haben:
dotnet workload update + das Projekt umgebaut. Wenn das nicht hilft, probieren Sie den folgenden Schritt zum Override -Paket aus<PackageReference Include="Microsoft.Extensions.Logging.Abstractions" VersionOverride="7.0.1" /> Cropper.Blazor optimiert die Implementierung von Bildbilder und Bearbeitung in Blazor -Anwendungen, Verbesserung des Benutzers und die Ermöglichung einer dynamischen Bildmanipulation. Unabhängig davon, ob Sie einen auf Blazor-basierten Bildeditor, einen Profilbild-Uploader oder eine andere Anwendung entwickeln, für die Image Cropping erforderlich ist, Cropper.blazor ist ein wertvolles Paket, das den Entwicklungsprozess vereinfacht und die Funktionen Ihrer Anwendung angereichert.
dotnet add package Cropper.Blazor
Benutzerdefiniertes Element importieren:
@ using Cropper . Blazor . Components Fügen Sie Folgendes zu index.html (Client-Seite-Blazor-WebAssembly, Blazor Maui) oder _Host.cshtml (Server-Side-Blazor Server, MVC mit Blazor Server) im head
< link href = " _content/Cropper.Blazor/cropper.min.css " rel = " stylesheet " /> Fügen Sie Folgendes zu index.html oder _Host.cshtml im body hinzu
< script src = " _content/Cropper.Blazor/cropper.min.js " ></ script > Fügen Sie Folgendes zu den entsprechenden Program.cs hinzu.cs
using Cropper . Blazor . Extensions ; builder . Services . AddCropper ( ) ;Darüber hinaus können Sie den Pfad zum CropperjSinterop.min.js -Modul ändern, wenn es sich aus irgendeinem Grund wie folgt außerhalb des Server -Root -Ordners befindet:
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"
} )Außerdem müssen Sie für serverseitige (Blazor Server oder MVC mit Blazor Server) Konfigurationssignal hinzufügen, maximumReceivEremessageSize einer einzelnen eingehenden Hub-Nachricht erhöhen (Standard ist 32 KB) und SignalR auf Ihren Pfad. Wenn Ihre Bilder jedoch zu groß sind, sollte die Variable von MaximumReceivEremessageSize auf den gewünschten Wert erhöht werden. Zum Beispiel:
builder . Services . AddServerSideBlazor ( )
. AddHubOptions ( options =>
{
options . MaximumReceiveMessageSize = 32 * 1024 * 100 ;
} ) ; app . MapBlazorHub ( ) ;Und verwenden Sie es dann in Razor -Datei (zum Beispiel):
< 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 >Und verwenden Sie es dann in der Datei *.razor.cs
Sie können das Cropper -JavaScript -Modul mit Ausführungsskript überschreiben, das 6 Ereignishandler (OnReady, Oncropstart, OncropMove, Oncropend, Oncrop, Onzoom) ersetzen kann, z. B. den Onzoom -Rückruf in 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 ) ;
}
} ;
} ;Analyse der Signatur onReady, Oncropstart, OncropMove, Oncropend, Oncrop-, Onzoom -Event -Handler:
ObjectVerweis auf die Basis -Cropper -Komponente.
CustomEventRepräsentieren von Cropper -Event.
StringCropper.BlazorEine Korrelations -ID ist eine eindeutige Kennung, die der ersten Interaktion (eingehende Anforderung) hinzugefügt wird, um den Kontext zu identifizieren, und an alle Komponenten übergeben, die am Transaktionsfluss beteiligt sind.
Ich muss diese Regeln auf jeden Fall in Blazor mitteilen:
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>
