BootstrapBlazor.ImageCropper 0.0.4

.NET 6.0 
dotnet add package BootstrapBlazor.ImageCropper --version 0.0.4
NuGet\Install-Package BootstrapBlazor.ImageCropper -Version 0.0.4
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="BootstrapBlazor.ImageCropper" Version="0.0.4" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
paket add BootstrapBlazor.ImageCropper --version 0.0.4
#r "nuget: BootstrapBlazor.ImageCropper, 0.0.4"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
// Install BootstrapBlazor.ImageCropper as a Cake Addin
#addin nuget:?package=BootstrapBlazor.ImageCropper&version=0.0.4

// Install BootstrapBlazor.ImageCropper as a Cake Tool
#tool nuget:?package=BootstrapBlazor.ImageCropper&version=0.0.4

Blazor ImageCropper 图像裁剪 组件

基于Cropper.js

示例:

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<string> Crop 剪裁,返回 base64, 并执行 OnResult/OnBase64Result 回调
Task<Stream> 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 nuget stats

图片浏览器 Viewer

手写签名 SignaturePad

定位/持续定位 Geolocation

屏幕键盘 OnScreenKeyboard

百度地图 BaiduMap

谷歌地图 GoogleMap

蓝牙和打印 Bluetooth

PDF阅读器 PdfReader

文件系统访问 FileSystem

光学字符识别 OCR

电池信息/网络信息 WebAPI

文件预览 FileViewer

视频播放器 VideoPlayer

图像裁剪 ImageCropper

视频播放器 BarcodeGenerator

AlexChow

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

Product Compatible and additional computed target framework versions.
.NET net6.0 is compatible.  net6.0-android was computed.  net6.0-ios was computed.  net6.0-maccatalyst was computed.  net6.0-macos was computed.  net6.0-tvos was computed.  net6.0-windows was computed.  net7.0 is compatible.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages (1)

Showing the top 1 NuGet packages that depend on BootstrapBlazor.ImageCropper:

Package Downloads
BootstrapBlazor.Densen.All

Blazor 组件懒人包

GitHub repositories (1)

Showing the top 1 popular GitHub repositories that depend on BootstrapBlazor.ImageCropper:

Repository Stars
dotnetcore/BootstrapBlazor
A set of enterprise-class UI components based on Bootstrap and Blazor
Version Downloads Last updated
0.0.4 1,314 12/9/2023
0.0.3 88 12/8/2023
0.0.2 97 12/7/2023
0.0.1 86 12/7/2023