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 files smaller than 1mb)
- 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.
Only 4 steps to use Blazor.Cropper
Install our nuget pkg at nuget.org.
Add namespace to _import.razor
:
@using Blazor.Cropper
Then, 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.
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 ...*@
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();
var buffer = re.GetBytes();
var base64 = re.Base64;
}
@* .... 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: