Cropper.Blazor 1.2.5

Cropper.Blazor is a component that wraps around Cropper.js version 1.6.0

Demo

• CropperBlazor.github.io/demo

API

• https://cropperblazor.github.io/api

Prerequisites

• Supported .NET 7.0, .NET 6.0 versions for these web platforms:
  • Blazor WebAssembly
  • Blazor Server
  • Blazor Server Hybrid with MVC
  • MAUI Blazor Hybrid

Installation

dotnet add package Cropper.Blazor

Usage

Import Custom Element:

@using Cropper.Blazor.Components

Add the following to index.html (client-side — Blazor Webassembly, Blazor MAUI) or _Host.cshtml (server-side — Blazor Server, MVC with Blazor Server) in the head

<link href="_content/Cropper.Blazor/cropper.min.css" rel="stylesheet" />

Add the following to index.html or _Host.cshtml in the body

<script src="_content/Cropper.Blazor/cropper.min.js"></script>

Add the following to the relevant sections of Program.cs

using Cropper.Blazor.Extensions;

builder.Services.AddCropper();

In addition, you can change the path to the CropperJSInterop.min.js module if for some reason it is located outside the server root folder as follows:

• Override internal path to CropperJSInterop.min.js module:

builder.Services.AddCropper(new CropperJsInteropOptions()
{
    DefaultInternalPathToCropperModule = "<YourPath>/_content/Cropper.Blazor/cropperJsInterop.min.js"
})

• Override full global path to CropperJSInterop.min.js module:

builder.Services.AddCropper(new CropperJsInteropOptions()
{
    IsActiveGlobalPath = true,
    GlobalPathToCropperModule = "<StartUrlWithPath>/_content/Cropper.Blazor/cropperJsInterop.min.js"
})

Also for server-side (Blazor Server or MVC with Blazor Server) you need add configuration SignalR, increase MaximumReceiveMessageSize of a single incoming hub message (default is 32KB) and map SignalR to your path. For example:

builder.Services.AddServerSideBlazor()
    .AddHubOptions(options =>
    {
        options.MaximumReceiveMessageSize = 32 * 1024 * 100;
    });

app.MapBlazorHub();

And then use it in Razor file (for example):

<CropperComponent
  Class="cropper-demo"
  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">
</CropperComponent>

And then use it in *.razor.cs file

You may override Cropper JavaScript module with execution script which can replace 6 event handlers (onReady, onCropStart, onCropMove, onCropEnd, onCrop, onZoom), such as overriding the onZoom callback in JavaScript:

window.overrideCropperJsInteropModule = (minZoomRatio, maxZoomRatio) => {
    window.cropper.onZoom = function (imageObject, event, correlationId) {
        const jSEventData = this.getJSEventData(event, correlationId);
        const isApplyPreventZoomRatio = minZoomRatio != null || maxZoomRatio != null;

        if (isApplyPreventZoomRatio && (event.detail.ratio < minZoomRatio || event.detail.ratio > maxZoomRatio)) {
            event.preventDefault();
        }
        else {
            imageObject.invokeMethodAsync('CropperIsZoomed', jSEventData);
        }
    };
};

Analysis of the signature onReady, onCropStart, onCropMove, onCropEnd, onCrop, onZoom event handlers:

imageObject

• Type: Object

Reference to base cropper component.

event

• Type: CustomEvent

Represent Cropper Event.

correlationId

• Type: String
• Default: Cropper.Blazor

A Correlation ID is a unique identifier that is added to the very first interaction(incoming request) to identify the context and is passed to all components that are involved in the transaction flow.

Definitely need to tell these rules in Blazor:

await JSRuntime!.InvokeVoidAsync("window.overrideCropperJsInteropModule", MinZoomRatio, MaxZoomRatio);

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b feature/<my-new-feature>
3. Commit your changes: git commit -m 'Add some feature'
4. Push to the branch: git push origin feature/<my-new-feature>
5. Submit a pull request 😄