DOCSEARCHbyAlgolia
Submit Docs

Cropper.Blazor

repository·dev·Indexed 41 days ago

https://github.com/cropperblazor/cropper.blazor

A Blazor component wrapper for Cropper.js (v1.6.2) that provides interactive image cropping, resizing, rotation, and zooming. It supports Blazor Web Apps, WebAssembly, Server, and MAUI Hybrid applications. Version 1.5.1 includes the CropperComponent for UI integration and extensions for service registration via AddCropper().

Tokens
4K
Snippets
17
Records
21
Agent score
48%

What's inside Cropper.Blazor

  1. Understand Cropper Event Handler Signatures

    dev

    When implementing event handlers (like onReady, onCropStart, onCropMove, onCropEnd, onCrop, or onZoom), the following parameters are provided:

    • imageObject (Object): A reference to the base cropper component.
    • event (CustomEvent): Represents the Cropper Event.
    • correlationId (String): A unique identifier (defaults to Cropper.Blazor) used to identify the context and passed through the transaction flow to ensure correct component interaction.

  3. Override Cropper JavaScript event handlers

    dev

    You can override the default Cropper JavaScript module behavior by using JSRuntime to call a custom script. This allows you to intercept events like onZoom to implement custom logic, such as preventing zoom beyond specific ratios.

    Example: Overriding onZoom in 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);
        }
    };
};

    Calling the override from C#:

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

  4. Override Cropper JavaScript Events

    dev

    You can override the default Cropper JavaScript module behavior by executing a script that replaces the standard event handlers. For example, to implement custom zoom constraints (preventing zoom outside a specific ratio), you can override window.cropper.onZoom.

    Example: Overriding onZoom in 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);
        }
    };
};

    To apply these overrides from your C# code, use the IJSRuntime:

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

  8. Use Open Iconic's SVG Sprite

    dev

    The SVG sprite allows you to load all icons in a single request. To use it, place an <svg> tag with a general class for styling and a <use> tag with a unique class and the specific icon ID.

    Implementation

    <svg class="icon">
  <use xlink:href="open-iconic.svg#account-login" class="icon-account-login"></use>
</svg>

    Styling

    Sizing: Since icons are square, set equal width and height on the <svg> tag.

    .icon {
  width: 16px;
  height: 16px;
}

    Coloring: Use the fill CSS property on the <use> tag to change the icon color.

    .icon-account-login {
  fill: #f00;
}