Cropper.Blazor
v1.3.2
Cropper.blazor - это компонент, который оборачивается вокруг Cropper.js версии 1.6.2
Самый мощный инструмент обрезки изображения для Blazor Webassembly / Server, гибридный с MAUI, MVC и другими структурами.
Cropper.Blazor является важным компонентом для создания интерактивных функций обрезки и манипуляций в Blazor Web Applications. Эта универсальная библиотека Blazor позволяет разработчикам интегрировать интуитивно понятную функцию обрезки изображений непосредственно в свои Blazor Projects, предлагая пользователям бесшовный и отзывчивый опыт редактирования изображений.
| Cropper.blazor | .СЕТЬ | Поддерживать |
|---|---|---|
| - | .NET 3.1 | Не поддерживается |
| - | .NET 5 | Не поддерживается |
| 1.1.x | .NET 6 | ✔ |
| 1.2.x | .Net 6 & .net 7 | ✔ |
| 1.3.x | .NET 6 & .NET 7 & .NET 8 | ✔ |
Поддерживается .NET 8.0, .NET 7.0, .NET 6.0 версии для этих веб -платформ:
Примечание. Если у вас есть проблемы с зависимостью проекта MAUI:
dotnet workload update + перестроить проект. Если это не поможет, попробуйте шаг ниже о переопределении пакета<PackageReference Include="Microsoft.Extensions.Logging.Abstractions" VersionOverride="7.0.1" /> Cropper.Blazor оптимизирует реализацию обрезки и редактирования изображений в приложениях Blazor, улучшая вовлечение пользователей и обеспечивая динамические манипуляции с изображениями. Независимо от того, разрабатываете ли вы редактор изображений на основе Blazor, загрузчик изображений профиля или любое другое приложение, которое требует обрезки изображений, Cropper.blazor-это ценный пакет, который упрощает процесс разработки и обогащает возможности вашего приложения.
dotnet add package Cropper.Blazor
Импортируйте пользовательский элемент:
@ using Cropper . Blazor . Components Добавьте следующее в index.html (клиентская сторона-Blazor Webassembly, Blazor Maui) или _Host.cshtml (Сервер-сервер Blazor, MVC с сервером Blazor) в head
< link href = " _content/Cropper.Blazor/cropper.min.css " rel = " stylesheet " /> Добавить следующее в index.html или _Host.cshtml в body
< script src = " _content/Cropper.Blazor/cropper.min.js " ></ script > Добавьте следующее в соответствующие разделы Program.cs
using Cropper . Blazor . Extensions ; builder . Services . AddCropper ( ) ;Кроме того, вы можете изменить путь на модуль Cropperjsinterop.min.js, если по какой -то причине он находится за пределами корневой папки сервера следующим образом:
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"
} )Также для сервера (Blazor Server или MVC с Blazor Server) вам нужно добавить сигнал конфигурации, увеличить максимумриченоссуссуацию одного сообщения входящего концентратора (по умолчанию 32 КБ) и MAP Signalr на ваш путь. Однако, если ваши изображения слишком велики, переменная максимально -экологически чистого размера должна быть увеличена до желаемого значения. Например:
builder . Services . AddServerSideBlazor ( )
. AddHubOptions ( options =>
{
options . MaximumReceiveMessageSize = 32 * 1024 * 100 ;
} ) ; app . MapBlazorHub ( ) ;А затем используйте его в файле бритвы (например):
< 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 >А затем используйте его в файле *.razor.cs
Вы можете переопределить модуль JavaScript Cropper Javascript с помощью скрипта выполнения, который может заменить 6 обработчиков событий (Onready, OncropStart, OncropMove, Intropend, Oncrop, Onzoom), например, переоценка обратного вызова Onzoom в 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 ) ;
}
} ;
} ;Анализ подписи Onready, Oncropstart, Otcropmove, Otcropend, Otcrop, Onzoom Handlers Event:
ObjectСсылка на базовый компонент Cropper.
CustomEventПредставляют событие Cropper.
StringCropper.BlazorИдентификатор корреляции - это уникальный идентификатор, который добавляется к самому первое взаимодействие (входящий запрос) для определения контекста и передается всем компонентам, которые участвуют в потоке транзакций.
Определенно нужно рассказать эти правила в 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>
