HTML使用JSignature签字并上传图片

1.jsignature签字插件下载
jsignature签字插件下载
2.引入JS

<script src="https://s1.pstatp.com/cdn/expire-1-M/jquery/1.10.2/jquery.min.js"></script>
<script src="libs/jSignature.min.js"></script>

3.添加一个div，放在你需要的地方即可，加个高度，字体颜色黑色

<div id="signature" style="height:300px;color:black"></div>

4.添加一个style，让签字板背景变为白色

#signature {border: 2px dotted black;//添加边框background-color: '#000';//设置背景白色}

5.初始化签名板

$("#signature").jSignature({ 'UndoButton': true });//初始化签名板并且可以支持撤销

6.获取签名信息，并转换为png格式

function saveImage() {var datapair = $("#signature").jSignature("getData", "image");  //将canvas里面的数据转换成base64数组//判断用户是否进行了签字，initSignature在初始化完成的时候取一次，附上值即可if (datapair[1] == initSignature) {Toast("warning", "请先签字！");//换为自己的弹框即可return;}var imgBase64 = 'data:' + datapair[0] + "," + datapair[1];  //封装成正确的base64var file = base64toFile(imgBase64, 'file');     //base64转换成流文件，然后就可以上传了let formData = new FormData()            //封装成formData格式formData.append('type', 3);//此参数根据具体业务处理formData.append("images", file);//上传的文件，images为后台接收的参数名称$("#loadding").show();$.ajax({type: "post",data: formData,processData: false,contentType: false,url: 'xxx',//注意替换成自己的urlsuccess: function (result) {//上传完之后的结果},error: function (XMLHttpRequest, textStatus, errorThrown) {Toast("error", "后台错误", "status:" + XMLHttpRequest.status + ' readyState:' + XMLHttpRequest.readyState + ' textStatus:' + textStatus);$("#loadding").hide();}});}//将文件转换为文件流function base64toFile(dataurl, filename) {var arr = dataurl.split(',')var mime = arr[0].match(/:(.*?);/)[1]var suffix = mime.split('/')[1]var bstr = atob(arr[1])var n = bstr.lengthvar u8arr = new Uint8Array(n)while (n--) {u8arr[n] = bstr.charCodeAt(n)}return new File([u8arr], filename + '.' + suffix, {type: mime})}

HTML使用JSignature签字并上传图片相关推荐

PHP调用jsignature生成图片,App端jSignature签字版生成透明背景png图片
if(page.touchcount>1){ //业务需求至少手绘2笔才保存 //将画布内容转换为图片 var datapair = $("#signature").j ...
excel表格公式不更新_一步更新多个Excel公式
excel表格公式不更新 You've probably used the Excel Paste Special command to multiply cells by a specific pe ...
jSignature 插件实现手写电子签名
需求:需要在合同的最后加一个签名区,让用户能用鼠标或手指进行签名. 解决方案:jSignature 插件,依赖jquery. index.html //#canvasDiv 就是书写区域,img 是书 ...
HTML5+jSignature插件手写签名生成图片并转换成文件流实现功能
公司需求html5手写签名,并转换成图片上传服务器项目结构:jquery+springboot项目需要引入js文件:jquery的jquery.min.js .jSignature插件的 jSign ...
jSignature 签名时手写不出现笔迹，就是写不上字
问题描述:微信访问H5网页A,在A页面首次加载后,签名功能正常使用,没有问题.当A页面跳转到B页面,B页面回退到A页面后,在A页面使用监听pageshow时间如果是缓存页面强制重新加载A页面,保证A页 ...
jSignature开发实例
插件描述:jQuery手写签名插件jSignature ,实现H5APP.网页手写签名涂鸦保存图片代码实例 <!DOCTYPE HTML PUBLIC "-//W3C//DTD ...
使用jSignature生成手写数字签名并保存为图片
1.调用jSignature插件生成手写数字签名头部记得先引用jquery,再引用jSignature的js文件,html网页源码如下: <!DOCTYPE html> <html ...
jSignature签名和横向签名转至元数据结尾
相关链接: GitHub - brinley/jSignature: jQuery plugin for adding web signature functionality 相关文件: jquery ...
JQuery插件秀：生成PDF文件（文本+上传图片+电子签名）
前言需求如下:根据 docx 模板形成页面,让用户直接填写相关信息,在线生成 PDF 文件,无需用户下载 docx 模板填完信息再转为 PDF. 填写信息包括普通文本.上传图片.在线电子签名. 方案 ...

HTML使用JSignature签字并上传图片

HTML使用JSignature签字并上传图片相关推荐

最新文章

热门文章