Cropper.Blazor
v1.3.2
Cropper.Blazor é um componente que envolve o Cropper.js versão 1.6.2
A ferramenta de corte de imagens mais poderosa para a Blazor WebAssembly / Server, Hybrid com MAUI, MVC e outras estruturas.
Cropper.Blazor é um componente essencial para a construção de recursos interativos de corte de imagens e manipulação em aplicativos da Web Blazor. Esta versátil biblioteca Blazor capacita os desenvolvedores a integrar a funcionalidade intuitiva de corte de imagens diretamente em seus projetos blazianos, oferecendo aos usuários uma experiência de edição de imagem perfeita e responsiva.
| Cropper.Blazor | .LÍQUIDO | Apoiar |
|---|---|---|
| - | .NET 3.1 | Não suportado |
| - | .NET 5 | Não suportado |
| 1.1.x | .NET 6 | ✔️ |
| 1.2.x | .NET 6 & .NET 7 | ✔️ |
| 1.3.x | .NET 6 & .NET 7 & .NET 8 | ✔️ |
Suportado .NET 8.0, .NET 7.0, .NET 6.0 Versões para essas plataformas da Web:
Nota: Se você tiver problemas com as dependências do projeto Maui:
dotnet workload update + reconstruído o projeto. Se isso não ajudar, tente a etapa abaixo sobre o pacote de substituição<PackageReference Include="Microsoft.Extensions.Logging.Abstractions" VersionOverride="7.0.1" /> Cropper.Blazor simplifica a implementação do corte e edição de imagens em aplicativos Blazor, aprimorando o envolvimento do usuário e permitindo a manipulação de imagem dinâmica. Esteja você desenvolvendo um editor de imagens baseado em Blazor, um upload de imagens de perfil ou qualquer outro aplicativo que requer corte de imagens, o Cropper.
dotnet add package Cropper.Blazor
Importar elemento personalizado:
@ using Cropper . Blazor . Components Adicione o seguinte ao index.html (lado do cliente-Blazor WebAssembly, Blazor Maui) ou _Host.cshtml (servidor servidor-servidor Blazor, MVC com servidor Blazor) na head
< link href = " _content/Cropper.Blazor/cropper.min.css " rel = " stylesheet " /> Adicione o seguinte ao index.html ou _Host.cshtml no body
< script src = " _content/Cropper.Blazor/cropper.min.js " ></ script > Adicione o seguinte às seções relevantes do Program.cs
using Cropper . Blazor . Extensions ; builder . Services . AddCropper ( ) ;Além disso, você pode alterar o caminho para o módulo CropPerjsinterOp.min.js se, por algum motivo, estiver localizado fora da pasta raiz do servidor da seguinte forma:
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"
} )Também para o servidor (servidor Blazor ou MVC com servidor Blazor), você precisa adicionar sinal de configuração, aumentar o MaximumReceIVEMESSAGESize de uma única mensagem de hub de entrada (padrão é 32kb) e mapear o Signalr no seu caminho. No entanto, se suas imagens forem muito grandes, a variável MaximumReceIVEMESSagesize deve ser aumentada para o valor desejado. Por exemplo:
builder . Services . AddServerSideBlazor ( )
. AddHubOptions ( options =>
{
options . MaximumReceiveMessageSize = 32 * 1024 * 100 ;
} ) ; app . MapBlazorHub ( ) ;E depois use -o no arquivo de barbear (por exemplo):
< 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 >E então use -o no arquivo *.razor.cs
Você pode substituir o módulo JavaScript do Cropper pelo script de execução que pode substituir 6 manipuladores de eventos (Onready, Oncropstart, OnCropmove, OnCropend, OnCrop, Onzoom), como substituir a chamada de OnZoom no 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álise da assinatura Onready, OnCropstart, OnCropmove, OnCropend, OnCrop, OnZoom Event Handlers:
ObjectReferência ao componente Base Cropper.
CustomEventRepresentar o evento Cropper.
StringCropper.BlazorUm ID de correlação é um identificador exclusivo que é adicionado à primeira interação (solicitação de entrada) para identificar o contexto e é passada a todos os componentes envolvidos no fluxo de transações.
Definitivamente preciso contar essas regras no 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>
