Cropper.Blazor
v1.3.2
Cropper.Blazor est un composant qui s'enroule autour de Cropper.js version 1.6.2
L'outil d'image le plus puissant pour Blazor WebAssembly / Server, hybride avec Maui, MVC et d'autres cadres.
Cropper.Blazor est un composant essentiel pour construire des fonctionnalités de recadrage d'images interactives et de manipulation dans les applications Web du Blazor. Cette bibliothèque polyvalente Blazor permet aux développeurs de intégrer des fonctionnalités de recadrage d'images intuitives directement dans leurs projets Blazor, offrant aux utilisateurs une expérience d'édition d'image transparente et réactive.
| Cropper.blazor | .FILET | Soutien |
|---|---|---|
| - | .NET 3.1 | Non pris en charge |
| - | .Net 5 | Non pris en charge |
| 1.1.x | .Net 6 | ✔️ |
| 1.2.x | .Net 6 & .net 7 | ✔️ |
| 1.3.x | .Net 6 & .net 7 & .net 8 | ✔️ |
Versions .NET 8.0, .NET 7.0, .NET 6.0 prises en charge pour ces plates-formes Web:
Remarque: si vous avez un problème avec les dépendances du projet MAUI:
dotnet workload update + Reconstruire le projet. Si cela n'aide pas, essayez l'étape ci-dessous sur le package de remplacement<PackageReference Include="Microsoft.Extensions.Logging.Abstractions" VersionOverride="7.0.1" /> Cropper.Blazor rationalise la mise en œuvre du recadrage d'images et de l'édition dans les applications de Blazor, l'amélioration de l'engagement des utilisateurs et l'activation de la manipulation dynamique de l'image. Que vous développiez un éditeur d'image basé sur un blazor, un téléchargeur d'images de profil ou toute autre application qui nécessite un recadrage d'image, Cropper.Blazor est un package précieux qui simplifie le processus de développement et enrichit les capacités de votre application.
dotnet add package Cropper.Blazor
Importer un élément personnalisé:
@ using Cropper . Blazor . Components Ajoutez ce qui suit à index.html (côté client - Blazor WebAssembly, Blazor Maui) ou _Host.cshtml (côté serveur - Blazor Server, MVC avec serveur Blazor) dans la head
< link href = " _content/Cropper.Blazor/cropper.min.css " rel = " stylesheet " /> Ajoutez ce qui suit à index.html ou _Host.cshtml dans le body
< script src = " _content/Cropper.Blazor/cropper.min.js " ></ script > Ajoutez ce qui suit aux sections pertinentes de Program.cs
using Cropper . Blazor . Extensions ; builder . Services . AddCropper ( ) ;De plus, vous pouvez modifier le chemin du chemin vers le module Cropperjsinterop.min.js si pour une raison quelconque, il est situé à l'extérieur du dossier racine du serveur comme suit:
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"
} )Également pour le côté serveur (serveur Blazor ou MVC avec Blazor Server), vous devez ajouter un signal de configuration, augmenter maximumReceiveMessageSize d'un seul message de concentrateur entrant (par défaut est 32 Ko) et mappez le signalr sur votre chemin. Cependant, si vos images sont trop grandes, la variable maximale de réception de taille doit être augmentée à la valeur souhaitée. Par exemple:
builder . Services . AddServerSideBlazor ( )
. AddHubOptions ( options =>
{
options . MaximumReceiveMessageSize = 32 * 1024 * 100 ;
} ) ; app . MapBlazorHub ( ) ;Puis l'utilisez dans le fichier de rasoir (par exemple):
< 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 >Puis utilisez-le dans le fichier * .razor.cs
Vous pouvez remplacer le module JavaScript Cropper avec un script d'exécution qui peut remplacer 6 gestionnaires d'événements (OnReady, OnCroPstart, OnCroPmove, OnCroPend, OnCrop, ONZOOM), tels que la remplacement du rappel onzoom dans 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 de la signature Onready, OnCroPstart, Oncropmove, OnCroPend, Oncrop, ONZOOM Événements: les gestionnaires d'événements:
ObjectRéférence à la composante de Cropper de base.
CustomEventReprésenter l'événement Cropper.
StringCropper.BlazorUn ID de corrélation est un identifiant unique qui est ajouté à la toute première interaction (demande entrante) pour identifier le contexte et transmis à tous les composants impliqués dans le flux de transactions.
Besoin de dire ces règles dans 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>
