Cropper.Blazor
v1.3.2
Cropper.Blazor es un componente que envuelve alrededor de Cropper.js versión 1.6.2
La herramienta de recorte de imágenes más potente para Blazor WebAssembly / Server, híbrido con Maui, MVC y otros marcos.
Cropper.Blazor es un componente esencial para construir características de cultivo y manipulación de imágenes interactivas en aplicaciones web de Blazor. Esta versátil biblioteca Blazor faculta a los desarrolladores para integrar la funcionalidad intuitiva de cultivo de imágenes directamente en sus proyectos de Blazor, ofreciendo a los usuarios una experiencia de edición de imágenes perfectas y receptivas.
| Cropper.Blazor | .NETO | Apoyo |
|---|---|---|
| - | .NET 3.1 | No compatible |
| - | .NET 5 | No compatible |
| 1.1.x | .NET 6 | ✔️ |
| 1.2.x | .NET 6 y .NET 7 | ✔️ |
| 1.3.x | .NET 6 & .NET 7 y .NET 8 | ✔️ |
Versiones compatibles con .NET 8.0, .NET 7.0, .NET 6.0 para estas plataformas web:
Nota: Si tiene problemas con las dependencias del proyecto Maui:
dotnet workload update + reconstruyó el proyecto. Si eso no ayuda, intente el paso a continuación sobre el paquete de anulación<PackageReference Include="Microsoft.Extensions.Logging.Abstractions" VersionOverride="7.0.1" /> Cropper.Blazor agiliza la implementación del cultivo y la edición de imágenes dentro de las aplicaciones Blazor, mejorando la participación del usuario y habilitando la manipulación dinámica de imágenes. Ya sea que esté desarrollando un editor de imágenes basado en Blazor, un cargador de imágenes de perfil o cualquier otra aplicación que requiera recorte de imágenes, Cropper.Blazor es un paquete valioso que simplifica el proceso de desarrollo y enriquece las capacidades de su aplicación.
dotnet add package Cropper.Blazor
Importar elemento personalizado:
@ using Cropper . Blazor . Components Agregue lo siguiente a index.html (del lado del cliente-Blazor WebAssembly, Blazor Maui) o _Host.cshtml (Servidor-Servidor Blazor, MVC con servidor Blazor) en la head
< link href = " _content/Cropper.Blazor/cropper.min.css " rel = " stylesheet " /> Agregue lo siguiente a index.html o _Host.cshtml en el body
< script src = " _content/Cropper.Blazor/cropper.min.js " ></ script > Agregue lo siguiente a las secciones relevantes del Program.cs
using Cropper . Blazor . Extensions ; builder . Services . AddCropper ( ) ;Además, puede cambiar la ruta al módulo CropperJsinTerop.min.js si por alguna razón se encuentra fuera de la carpeta raíz del servidor de la siguiente manera:
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"
} )También para el lado del servidor (servidor Blazor o MVC con Blazor Server) necesita agregar SignalR de configuración, aumentar MaximumumReceIvEMessageAsage de un solo mensaje de concentración entrante (el valor predeterminado es 32 kb) y asigna señalización a su ruta. Sin embargo, si sus imágenes son demasiado grandes, la variable máxima de reciéntese debe aumentarse al valor deseado. Por ejemplo:
builder . Services . AddServerSideBlazor ( )
. AddHubOptions ( options =>
{
options . MaximumReceiveMessageSize = 32 * 1024 * 100 ;
} ) ; app . MapBlazorHub ( ) ;Y luego úselo en el archivo Razor (por ejemplo):
< 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 >Y luego úselo en *.razor.cs archivo
Puede anular el módulo JavaScript de Cropper con un script de ejecución que puede reemplazar 6 controladores de eventos (OnReate, OnCropStart, OnCropmove, OnCropend, Oncrop, Onzoom), como anular la devolución de llamada en 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 ) ;
}
} ;
} ;Análisis de la firma On Ready, OncropStart, Oncropmove, Oncropend, Oncrop, Onzoom Event Handlers:
ObjectReferencia al componente base de cultivo.
CustomEventRepresentar al evento Cropper.
StringCropper.BlazorUna identificación de correlación es un identificador único que se agrega a la primera interacción (solicitud entrante) para identificar el contexto y se pasa a todos los componentes que están involucrados en el flujo de transacción.
Definitivamente necesito decir estas reglas en 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>
