手写签名组件-jSignature

合集 - 前端问题记录(8)

1.字体随背景颜色改变2024-07-302.自定义协议URL protocal 在网页端打开本地应用程序2024-07-303.在https的页面中调用http的接口会报错的问题2024-07-30

4.手写签名组件-jSignature2024-07-30

5.基于vue的图片裁剪vue-cropper2024-07-306.鬼屎玩意 DataTabel 的一些配置详解2024-07-307.webpack代理问题排查2024-07-308.JS中?.、??、??=的含义以及用法2024-07-30

收起

参考资料：
https://www.cnblogs.com/weblxlx/p/11792059.html

使用简介：使用该插件需要引入jQuery和jSignature.js

// 初始化jSignature
var $signature = $("#signature").jSignature();

// 重置画布
$signature.jSignature('reset');

// 获取数据
var data = $signature.jSignature('getData', 'default');
 
// 图片展示
var img = new Image()
img.src = data
$(img).appendTo($('#signimg'))

// 将数据显示在文本框
$('#text').val(data)

// 撤销上一步
// 初始化时传入参数 {'UndoButton':true}
$("#signature").jSignature({'UndoButton':true});

// 绘画板，例如设置笔触的颜色
// 加入方法setColor
'setColor': function(color) {
     // 获取 context 对象
     var context2D = this.find('canvas.'+apinamespace)
                     .add(this.filter('canvas.'+apinamespace))
                     .data(apinamespace+'.this').canvasContext;
     // 设置阴影的颜色
     context2D.shadowColor = 'transparent';
     // 设置笔触颜色
     context2D.strokeStyle = color;
     return;
}