Blazor SignaturePad 手写签名 组件

示例

https://www.blazor.zone/signaturepads

https://blazor.app1.es/signaturepad

使用方法:

1. nuget包

   BootstrapBlazor.SignaturePad

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

   @using BootstrapBlazor.Components

3. Razor页面

       <SignaturePad OnResult="((e) =>  Result=e)" />
   

       <SignaturePad OnResult="((e) =>  Result=e)" BtnCssClass="btn btn-outline-success" />
   

       <SignaturePad OnResult="((e) =>  Result=e)"
                     SignAboveLabel="Sign above"
                     UndoBtnTitle="Undo"
                     SaveBase64BtnTitle="OK"
                     ChangeColorBtnTitle="Change color"
                     ClearBtnTitle="Clear" />
   

   @code{
   
       /// <summary>
       /// 签名Base64
       /// </summary>
       public string? Result { get; set; }
   
   }
   

4. 更多信息请参考

   Bootstrap 风格的 Blazor UI 组件库 基于 Bootstrap 样式库精心打造，并且额外增加了 100 多种常用的组件，为您快速开发项目带来非一般的感觉

   https://www.blazor.zone

   https://www.blazor.zone/signaturepads

---

更新历史

v7.0.3

• 清除按钮改为不触发 OnResult 事件

v7.0.2

• 添加 EnableUndoBtn : 启用撤消按钮/Enable undo button
• 添加 BtnSaveCssClass : 按钮 "保存 "的css样式
• 感谢 ArtemAksenov's pr.

Blazor SignaturePad component

Demo

https://www.blazor.zone/signaturepads

https://blazor.app1.es/signaturepad

Instructions:

1. NuGet install pack

   BootstrapBlazor.OnScreenKeyboard

2. _Imports.razor or Razor page

   @using BootstrapBlazor.Components
   

3. Razor page

       <SignaturePad OnResult="((e) =>  Result=e)" />
   

       <SignaturePad OnResult="((e) =>  Result=e)" BtnCssClass="btn btn-outline-success" />
   

       <SignaturePad OnResult="((e) =>  Result=e)"
                     SignAboveLabel="Sign above"
                     UndoBtnTitle="Undo"
                     SaveBase64BtnTitle="OK"
                     ChangeColorBtnTitle="Change color"
                     ClearBtnTitle="Clear" />
   

   @code{
   
       /// <summary>
       /// Sign Base64
       /// </summary>
       public string? Result { get; set; }
   
   }
   

4. More informations

   Bootstrap style Blazor UI component library Based on the Bootstrap style library, it is carefully built, and 100 a variety of commonly used components have been added to bring you an extraordinary feeling for rapid development projects

   https://www.blazor.zone

   https://www.blazor.zone/signaturepads

Historial de actualizaciones

v7.0.2

• Add EnableUndoBtn : Enable undo button
• Add BtnSaveCssClass : Button "Save" css style
• Thanks ArtemAksenov's pr.

---

Blazor 组件

条码扫描 ZXingBlazor

图片浏览器 Viewer

手写签名 SignaturePad

定位/持续定位 Geolocation

屏幕键盘 OnScreenKeyboard

百度地图 BaiduMap

谷歌地图 GoogleMap

蓝牙和打印 Bluetooth

PDF阅读器 PdfReader

文件系统访问 FileSystem

光学字符识别 OCR

电池信息/网络信息 WebAPI

文件预览 FileViewer

视频播放器 VideoPlayer

图像裁剪 ImageCropper

视频播放器 BarcodeGenerator

AlexChow

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