Blazor.Cropper

A blazor library provide a component to crop image
=>

Sample site here
It is:

• almost full c#
• fast
• mobile compatible
• lighweight
• support proportion
• GIF crop support(only for small files)
• support maui(blazor)
• open source on github

If you find Blazor.Cropper helpful, you could star this repo, it's really important to me.

For a long time, crop image in blazor bother me a lot. That's why I tried to implement a cropper in blazor.

Maui Usage (new)

Blazor.Cropper now supports maui(blazor)!
In some platforms, you may need to use FilePicker to get the input image rather than using html input element. You can find details in the maui sample project

dotnet 6 changes

Although most of apis remains the same, there're some new apis which provide better performance in .Net 6.
In dotnet 5, using ImageCroppedResult.GetBase64Async(); to get the base64 result is fine. In dotnet 6, it should be replaced with ImageCroppedResult.GetDataAsync();, which may combined with new SetImageAsync(this IJSRuntime js,byte[] bin,string imgid) api to display the crop result.
You may find dotnet 6 sample here

Server-side Usage

Blazor.Cropper is designed to be a client side library. However, it can be used on server side blazor when setting PureCSharpProcessing="true".
Please note that using Blazor.Cropper on server side could consume remarkable amount of server resources(including bandwidth, cpu and memory).
Sample project

Quick Start

Only 4 steps to use Blazor.Cropper

Step0. Add nuget pkg

Install our nuget pkg at nuget.org. Add namespace to _import.razor:

@using Blazor.Cropper

Step1. Add script referrence

Then, you should paste following code into your index.html:

<script src="_content/Chronos.Blazor.Cropper/CropHelper.js"></script>

Step2. Add cropper

Just add cropper to your code. We recommend you to use it inside a modal card.
Note: to use the cropper, you need to use a <InputFile> component to get a file source. You must provide a paramter named InputId, which's value is the same as the id attribute of the <InputFile> component.
Example:

@* .... some code ...*@
<InputFile id="input1"></InputFile>
<Cropper InputId="input1" ></Cropper>
@* .... some code ...*@

Step3. Get result

To get the crop result, you need to get the reference of the Cropper, then call the Cropper.GetCropedResult() method.
Example:

@* .... some code ...*@
<Cropper InputId="input1" @ref="cropper"></Cropper>
@* .... some code ...*@
@code{
    Cropper cropper;
    @* .... some code ...*@
    void GetCropResult()
    {
        var re = cropper.GetCropedResult();

        // in dotnet 6 or later
        var buffer = await re.GetDataAsync();
        // donot transfer bytes to base64 in dotnet 6.
        // if you want to display the crop result, use 
        // SetImageAsync(this IJSRuntime js,byte[] bin,string imgid) to
        // do the job



        // otherwise, get base64 directly
        // var base64 = await re.GetBase64Async();
    }
    @* .... some code ...*@
}

Api referrence

We have detailed xml comments on Cropper's properties & methods, simply read it while use it!
On the other hand, you can go to the sample project for usage examples.
To build it, simply clone it and run it in visual studio. The running result should be like this: