移动端手写签名实现（jSignature.js）

1、引入jQuery.js、jSignature.js （jSignature是基于jquery的插件所以要先引入jQuery，jSignature.js 下载地址https://github.com/brinley/jSignature）
2、html如下

<div class="container"><div id="signatureparent"><div id="signature"></div></div><br><button type="button" class="btn btn-primary btn-block" id="save">保存</button><button type="button" class="btn btn-default btn-block" id="clear">清除</button>
</div>

3、初始化jSignature 在初始化的时候会接受一个对象作为参数

var param= {width: '100%',//签名区域的宽height: '300px',//签名区域的高cssclass: 'zx11',//画布的类 可以写自定义的样式UndoButton:true,//撤销按钮的状态 这个按钮的样式修改要去jSignature.js文件中去找signatureLine: false,//去除默认画布上那条横线lineWidth: '1' //画笔的大小};$("#signature").jSignature(param);

4、画布初始化后需要添加两个事件保存和清除

//jSignature提供了清除的API reset
$('#clear').click(function () {$("#signature").jSignature("reset");
});
//提交
$('#save').click(function () {if( $("#signature").jSignature('getData', 'native').length === 0){alert("请签名后再提交！");return;}var con=confirm("提交后不可更改，确认提交签名？");if(con===false) return;//将签名的画布保存为base64编码字符串 默认是png的var datapair = $("#signature").jSignature("getData","image");var i = new Image();i.src = "data:" + datapair[0] + "," + datapair[1];console.log(datapair[0]);//image/png;base64i.image = datapair[1];console.log(i.image);
}

5、base64转file
①通过new File()将base64转换成file文件，此方式需考虑浏览器兼容问题

//将base64转换为文件dataURLtoFile: function(dataurl, filename) { var arr = dataurl.split(','),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new File([u8arr], filename, { type: mime });},//调用var file = dataURLtoFile(base64Data, imgName);

②先将base64转换成blob，再将blob转换成file文件，此方法不存在浏览器不兼容问题

//将base64转换为blobdataURLtoBlob: function(dataurl) { var arr = dataurl.split(','),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], { type: mime });},//将blob转换为fileblobToFile: function(theBlob, fileName){theBlob.lastModifiedDate = new Date();theBlob.name = fileName;return theBlob;},//调用var blob = dataURLtoBlob(base64Data);var file = blobToFile(blob, imgName);

参考：https://blog.csdn.net/weixin_44589491/article/details/104597071

移动端手写签名实现（jSignature.js）相关推荐

页面手写签名插件 jSignature.min.js 使用实例
页面手写签名插件 jSignature.min.js 使用实例 jSignature.min.js 插件下载页面使用demo <!DOCTYPE html> <html xmlns ...
手写签名插件—jSignature使用心得
最近需要做一个移动端手写签名的功能,上网搜了一下基本都是jSignature这个插件,几乎没得第二选择,于是照着网上的各个版本copy测试,在PC端测试是没什么问题的,很easy. 问题1::在移动端 ...
web 前端签名插件_手写签名插件—jSignature
jSignature 是一个通过捕捉笔画的矢量轮廓输出多种格式数据的jQuery插件,通过该插件我们可以实现绘画板.手写签名等功能. 使用该插件需要引入 jQuery 和jSignature.js,首 ...
在app端手写签名并保存下来（以文件形式或者是base64编码）
最近做的项目有个需求,在app端手写签名的并保存为文件或者base64编码.所以就刚好有时间写了一下并记录下来: 先上效果图: 分析思路:因为这里是要获取手势轨迹并画出来,所以肯定是有个Touch事件 ...
php手写签名保存,PHP+JS实现PC端+移动端PDF手写签名合并
PHP+JS实现PC端+移动端PDF手写签名合并 1年前阅读 3029 评论 0 喜欢 0 前端插件:`jSignature.js` PHP插件:`FPDF+FPDI` `index.html`代码 ...
html5 移动端手写签名,H5移动端项目实现手写签名功能 vue实现手写签名
vue 移动端实现手写签名效果,功能很完美,保存时保存为base64格式. 刚好项目用到此功能,就网上找了一下,清理了无用代码,简单方便,因为项目中多个地方需要使用,所以我将它整理为组件,通过ref和 ...
html 手写签名插件jSignature
最近要做一个工单完成手动签名提交的功能,上度娘一查,查到了jSignature插件. 1.在我们的代码中引入jSignature.min.js.插件代码(并且引入jquery) 2.html 代码 & ...
vue移动端横屏手写签名
最近项目组要求做一个移动端手写签名的组件,效果图如下去查了很多资料,也借鉴了很多别人写好的例子,最终完成,记录一下因为需要横屏签名,所以有监听手机屏幕,如果是手机屏幕锁定的情况下就通过代码旋转页面 ...
html 手写字效果,canvas画布实现手写签名效果的示例代码
最近项目中涉及到移动端手写签名的功能需求,将实现代码记录于此,供小伙伴们参考指摘哦~ HTML代码: 手写区清除确定 CSS样式: .mSign_signMark_box{padding: 15p ...

移动端手写签名实现（jSignature.js）

移动端手写签名实现（jSignature.js）相关推荐

最新文章

热门文章

移动端手写签名实现 （jSignature.js）

移动端手写签名实现 （jSignature.js）相关推荐

最新文章

热门文章

移动端手写签名实现（jSignature.js）

移动端手写签名实现（jSignature.js）相关推荐