Blazor ImageCropper 图像裁剪 组件

基于Cropper.js的Blazor组件

示例:

https://www.blazor.zone/ImageCroppers

https://blazor.app1.es/ImageCroppers

使用方法:

1.nuget包

BootstrapBlazor.ImageCropper

2._Imports.razor 文件 或者页面添加 添加组件库引用

@using BootstrapBlazor.Components

3.razor页面

<ImageCropper Url="./_content/DemoShared/icon-512.png" OnBase64Result="OnResult" />

@code{

    Task OnResult(string base64)
    {
        Console.WriteLine(base64);
        return Task.CompletedTask;
    }

}

<ImageCropper @ref="cropper" Url="@images[0]" DefaultButton="false" />

<BootstrapInputGroup>
    <Button Text="OK" OnClick="(async () => Base64 = await cropper.Crop())" />
    <Button Text="复位" OnClick="cropper.Reset" /> 
    <Button Text="替换" OnClick="(async () => {
                                   index = index == 0 ? 1 : 0;
                                   await cropper.Replace(images[index]); 
                               })" />
</BootstrapInputGroup>

<br/>
<Textarea Value="@Base64" rows="3" />

@code{

    ImageCropper? cropper;

    string[] images = ["./_content/DemoShared/test.jpg", "./_content/DemoShared/icon-512.png"];

    int index = 0;

    string? Base64 { get; set; } 

}

4.参数说明

类型	参数	说明	默认值
string	Url	图片URL/Base64 dataurl
string	ConfirmBtnTitle	确认按钮文本	OK
string	ResetBtnTitle	复位按钮文本	复位
string	PreviewTitle	预览文本	预览
bool	DefaultButton	显示默认按钮	true
bool	Preview	显示剪裁后预览	true
Task	Crop	剪裁,返回 base64, 并执行 OnResult/OnBase64Result 回调
Task	CropToStream	剪裁,返回 Stream
Task	Replace(string url)	替换图片
Task	SetDragMode(string? mode)	更改拖动模式
Task	Enable	组件可用
Task	Disable	禁用组件
Task	Reset	复位图像
Task	Clear	清空图像
Task	Destroy	销毁
Task	Rotate(int degree)	旋转, 90, 180, 270, -90 ...
Func<Stream, Task>	OnResult	剪裁结果 Stream 回调方法
Func<string, Task>	OnBase64Result	剪裁结果 base64 回调方法
Func<string, Task>?	OnError	错误回调
string	CssClass	自定义图片 CSS	null
string	CssPath	自定义CSS	null
string	ModulePath	自定义cropper.js路径	null

更新历史

---

Blazor 组件

条码扫描 ZXingBlazor

图片浏览器 Viewer

手写签名 SignaturePad

定位/持续定位 Geolocation

屏幕键盘 OnScreenKeyboard

百度地图 BaiduMap

谷歌地图 GoogleMap

蓝牙和打印 Bluetooth

PDF阅读器 PdfReader

文件系统访问 FileSystem

光学字符识别 OCR

电池信息/网络信息 WebAPI

文件预览 FileViewer

视频播放器 VideoPlayer

图像裁剪 ImageCropper

视频播放器 BarcodeGenerator

AlexChow

今日头条 | 博客园 | 知乎 | Gitee | GitHub