Json_exe.Blazor.CropperWrapper

Enhance your .NET Blazor applications with seamless image cropping functionality using Json_exe.Blazor.CropperWrapper, a comprehensive .NET Blazor wrapper for the Cropper.js library. This package lets you effortlessly integrate a customizable Cropper UI, leveraging the robust features of Cropper.js.

Table of Contents
Introduction
Getting Started
Preview
Examples
- MudBlazor Application
- How to add a GoBack function
Usage
Important
Roadmap
Built With
Authors
License
Closing Words

Introduction

Json_exe.Blazor.CropperWrapper is a powerful and flexible .NET Blazor wrapper designed for the popular Cropper.js library. It simplifies the process of adding image cropping features to your Blazor applications.

Getting Started

To start using Json_exe.Blazor.CropperWrapper:

Install the package via NuGet.
Include @using Json_exe.Blazor.Cropper in your _Imports.razor.
Add builder.Services.AddCropper() in your Program.cs or Startup.cs.
Use <CropperWrapper @ref="@CropperRef" ImageSrc="<Your-Image-Src>"/> in any page.
Create your user interface with buttons and other controls to interact with the cropper methods enabled by the Ref. CropperRef.Method()
Refer to Usage and Features for detailed information on methods and options.

Preview

Examples

MudBlazor Application

<CropperWrapper Options="new CropperOptions { AspectRatio = 1, ViewMode = 1 }" ImageSrc="@ImageData" @ref="@CropperRef" Alt="Example-Alt"/>
<MudDivider FlexItem Class="my-2"/>
<MudStack Row Spacing="5">
    <MudButton Variant="Variant.Filled" OnClick="@(() => CropperRef.GetCroppedArea())">Crop!</MudButton>
</MudStack>

In this example the Button calls the Method CropperRef.GetCroppedArea() which crops the image inside the Cropper Canva and replaces it witht the cropped version.

How to add a GoBack function

<CropperWrapper @ref="@CropperWrapperRef" ImageSrc="@_imageSrc"/>

@code 
{
  private readonly List<string> _changes = new();
  private CropperWrapper CropperWrapperRef { get; set; } = null!;
  private string _imageSrc = "<Your-Image-Src>";

  private async Task GoBack()
  {
    if (_changes.Count > 0)
    {
        _imageSrc = _changes.Last();
        await CropperWrapperRef.Replace(_imageSrc);
        _changes.RemoveAt(_changes.Count - 1);
    }
  }

  private async Task Crop()
  {
    _changes.Add(_imageSrc);
    var data = await CropperWrapperRef.GetCroppedArea();
    _imageSrc = data;
  }
}

Usage

Interactive Methods

The following methods are available to use atm.

GetCroppedArea():
- Crops the image with the selected Area and places the cropped image in the Canvas. The image before will be stored in a list to go back to that state.
GetImage():
- Returns the Base64 string inside the ImageSrc Property. This represents the image currently shown inside the Crop Canvas.
RotateLeft(int degree = 45):
- Rotates the image to the left.
- degree (optional): The amount of degrees you want to rotate the image
RotateRight(int degree = 45):
- Rotates the image to the right.
- degree (optional): The amount of degrees you want to rotate the image
ScaleVertical():
- Flips the image Vertically
ScaleHorizontal():
- Flips the image Horizontally
Move(int x, int y):
- Moves the image inside the Canvas
- x: The amount of pixels you want to move the image on the x axis
- y: The amount of pixels you want to move the image on the y axis
Reset():
- Resets the image to the original state.
Clear():
- Clears the image inside the Canvas.
Replace(string imageSrc):
- Replaces the image inside the Canvas with the given imageSrc.
- imageSrc: The Base64 string of the image you want to replace the current image with.
Enable():
- Enables the Cropper.
Disable():
- Disables the Cropper.
Zoom(double ratio):
- Zooms the image inside the Canvas.
- ratio: The amount of zoom you want to apply to the image.
RotateTo(int degree):
- Rotates the image to the given degree.
- degree: The degree you want to rotate the image to.
GetData(bool rounded = false):
- Returns the data of the Cropper.
- rounded (optional): If true, the data will be rounded.

Options

The following options are available to use atm. To read more about them consider using the official Cropper.js documentation

ViewMode:
- Type: int
- Default: 0
DragMode:
- Type: string
- Default: "crop"
InitialAspectRatio:
- Type: double
- Default: double.NaN
AspectRatio:
- Type: double
- Default: double.NaN
Preview:
- Type: string
- Default: ""
Responsive:
- Type: bool
- Default: true
Restore:
- Type: bool
- Default: true
CheckCrossOrigin:
- Type: bool
- Default: true
CheckOrientation:
- Type: bool
- Default: true
Modal:
- Type: bool
- Default: true
Guides:
- Type: bool
- Default: true
Center:
- Type: bool
- Default: true
Highlight:
- Type: bool
- Default: true
Background:
- Type: bool
- Default: true
AutoCrop:
- Type: bool
- Default: true
AutoCropArea:
- Type: double
- Default: 0.8
Moveable:
- Type: bool
- Default: true
Rotatable:
- Type: bool
- Default: true
Scalable:
- Type: bool
- Default: true
Zoomable:
- Type: bool
- Default: true
ZoomOnTouch:
- Type: bool
- Default: true
ZoomOnWheel:
- Type: bool
- Default: true
WheelZoomRatio:
- Type: double
- Default: 0.1
CropBoxMovable:
- Type: bool
- Default: true
CropBoxResizable:
- Type: bool
- Default: true
ToggleDragModeOnDblclick:
- Type: bool
- Default: true
MinContainerWidth:
- Type: double
- Default: 200
MinContainerHeight:
- Type: double
- Default: 100
MinCanvasWidth:
- Type: double
- Default: 0
MinCanvasHeight:
- Type: double
- Default: 0
MinCropBoxWidth:
- Type: double
- Default: 0
MinCropBoxHeight:
- Type: double
- Default: 0

Events

The following events are available to use atm. To read more about them consider using the official Cropper.js documentation

Ready:
- This event fires when the target image has been loaded and the cropper instance is ready for operating.
OnZoom:
- This event fires when the cropper instance starts to zoom in or zoom out its canvas (image wrapper).
OnCrop:
- This event fires when the canvas (image wrapper) or the crop box changes.

Important

Because Cropper returns an base64 string of the cropped image, the data can get very large for the SignalR connection. To prevent this, you can increase the max size of the SignalR connection in your Startup.cs.

services.AddSignalR(options =>
{
    options.MaximumReceiveMessageSize =  // 10MB for example 
});

Roadmap

Built With

Blazor - The web framework used
CSharp - The programming language used
Dotnet - The framework used
Cropper.js - JavaScript image cropper

Authors

Json-exe - Initial work - Json-exe

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Closing Words

Feel free to use this project. As this is my first Nuget project I would appreciate feedback in the form of feature requests or bugs.

Json-exe / Blazor.CropperWrapper