其实针对普通电子签名的话，直接下载这个插件打开里面的docs文件引入js，css和index直接运行就是一个电子签名面板了，很实用，功能和性能都是比较好的，插件地址szimek/signature_pad

还有其中有个app.js文件也需要引入，如果不引入里面的功能都用不了，主要是几个按钮的方法，如果不需要的可以删除。

css样式中 .signature-pad这个类名的flex-direction值要改成默认的才能让按钮和画框同行显示，这个地方一般调试就看的到，但是还是想提醒一下。我做的是移动端的电子签名功能，同行显示是为了让页面看起来是横屏显示，所以按钮用了css3中的动画旋转效果。

.signature-pad {

max-height: 570px !important;

flex-direction: initial;

}

.signature-pad--body {

width: 80%;

}

.signature-pad--footer {

width: 10%;

}

.signature-pad--body, .signature-pad--footer {

display: inline !important;

}

button {

transform-origin: 15% 90%;

transform: rotate(90deg);

margin-top: 85px;

width: 100px;

border: none;

background-color: dodgerblue;

color: #fff;

padding: 6px;

}

//页面的HTML布局，因为插件是基于js的，所以里面的方法如果是用vue包着那么方法就会失效，但是在数据面前我又需要用到vue和它的一个vant框架，这里有做个了奇葩的事，在整个电子签名的结构下写一个div然后vue在里面代码在里面操作，不知道这样是不是不对的。

剩下的就是js代码了，所以直接先引入signature_pad.umd.js文件，然后把app.js中的代码取了处出来，直接显示在页面中：

var wrapper = document.getElementById("signature-pad");

var clearButton = wrapper.querySelector("[data-action=clear]");

var changeColorButton = wrapper.querySelector("[data-action=change-color]");

var undoButton = wrapper.querySelector("[data-action=undo]");

var savePNGButton = wrapper.querySelector("[data-action=save-png]");

var saveJPGButton = wrapper.querySelector("[data-action=save-jpg]");

var saveSVGButton = wrapper.querySelector("[data-action=save-svg]");

var canvas = wrapper.querySelector("canvas");

var signaturePad = new SignaturePad(canvas, {

backgroundColor: 'rgb(255, 255, 255)'

});

function resizeCanvas() {

var ratio = Math.max(window.devicePixelRatio || 1, 1);

canvas.width = canvas.offsetWidth * ratio;

canvas.height = canvas.offsetHeight * ratio;

canvas.getContext("2d").scale(ratio, ratio);

signaturePad.clear();

}

window.onresize = resizeCanvas;

resizeCanvas();

function download(dataURL, filename) {

if (navigator.userAgent.indexOf("Safari") > -1 && navigator.userAgent.indexOf("Chrome") === -1) {

} else {

var blob = dataURLToBlob(dataURL);

var url = window.URL.createObjectURL(blob);

var a = document.createElement("a");

a.style = "display: none";

a.href = url;

a.download = filename;

document.body.appendChild(a);

window.URL.revokeObjectURL(url);

}

}

function dataURLToBlob(dataURL) {

var parts = dataURL.split(';base64,');

var contentType = parts[0].split(":")[1];

var raw = window.atob(parts[1]);

var rawLength = raw.length;

var uInt8Array = new Uint8Array(rawLength);

for (var i = 0; i < rawLength; ++i) {

uInt8Array[i] = raw.charCodeAt(i);

}

return new Blob([uInt8Array], { type: contentType });

}

clearButton.addEventListener("click", function (event) {

signaturePad.clear();

});

undoButton.addEventListener("click", function (event) {

var data = signaturePad.toData();

if (data) {

data.pop(); // remove the last dot or line

signaturePad.fromData(data);

}

});

//这里调用的是保存png图片的功能，所以要在这里面调用接口方法，dataURl是转换好了的base64字符格式的，直接传到方法中

savePNGButton.addEventListener("click", function (event) {

if (signaturePad.isEmpty()) {

alert("Please provide a signature first.");

} else {

var dataURL = signaturePad.toDataURL();

vm.upload(dataURL);

}

});

//imageStr64:图片数据,ImageName:图片名称,filePng:文件后缀名，如：png,imagePurpose：是上传签名还是图片

var vm = new Vue({

el: "#app",

data: {

imageStr64: '',

imageName: '',

disabled: false

},

methods: {

upload: function (dataURL) {

this.$toast.loading({

mask: true,

duration: 0,

message: '提交中...'

});

var _this = this;

var quality = 0.3; //压缩图片的质量

var canvas = document.createElement("canvas"); //创建画布

var ctx = canvas.getContext("2d");

var img = new Image();

img.src = dataURL;

var width = img.width;

var height = img.height;

canvas.width = 65; //这里可以自定义图片大小

canvas.height = 60;

ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

var cdata = canvas.toDataURL(); //将图片转为Base64

this.imageStr64 = cdata.split(',')[1];

this.imageName = new Date().getTime();

axios.post('/cil/OA/OA_WorkBench_ImageUpload', {

"ImageStr64": this.imageStr64,

"ImageName": this.imageName,

"Filenameextension": 'png',

"ImagePurpose": '上传签名'

}).then(function (res) {

var resData = JSON.parse(res.request.responseText).Message;

for (var i = 0; i < document.getElementsByTagName('button').length; i++) {

document.getElementsByTagName('button')[i].disabled = true;

document.getElementsByTagName('button')[i].style.backgroundColor = '#909090';

}

_this.$toast(resData);

}).catch(function (error) {

var errData = JSON.parse(error.request.responseText).Message;

_this.$toast(errData);

});

}

}

})

这样就做好一个移动端电子签名了，其实在插件上使用还是很好用的，只是在需要在别人插件上添加自己的需求比较麻烦，像这个功能的实现主要是在生成画布后上传图片要设置图片的大小，实现统一宽高的上传，然后压缩整个base64文件就好了。

有什么问题的话请多多指教。