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.
- CnGal CnGal是一个非营利性的，立志于收集整理国内制作组创作的中文Galgame/AVG的介绍、攻略、评测、感想等内容的资料性质的网站。
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
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
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
Only 4 steps to use Blazor.Cropper
Install our nuget pkg at nuget.org.
Add namespace to _import.razor:
@using Blazor.CropperThen, you should paste following code into your index.html:
<script src="_content/Chronos.Blazor.Cropper/CropHelper.js"></script>Just add cropper to your code. We recommend you to use it inside a modal card.
Example:
@* .... some code ...*@
<InputFile OnChange="OnInputFileChange"></InputFile>
<Cropper ImageFile="file" ></Cropper>
@* .... some code ...*@
async Task OnInputFileChange(InputFileChangeEventArgs args)
{
file = args.File;
}
@* .... some code ...*@
@* Example below shows how to bind Cropper with an InputFile component using InputId.
Please note that you must set ImageFile property inorder to use gif crop or PureCSharpProcessing function.
<InputFile id="input1"></InputFile>
<Cropper InputId="input1" ></Cropper>
*@To get the crop result, you need to get the reference of the Cropper, then call the Cropper.GetCropedResult() method.
Example:
@* .... some code ...*@
<Cropper ImageFile="file" @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 ...*@
}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:
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
