最近实习项目移动端需要用到手写签名，而移动端又是使用5+App开发的，所以就使用了jQuery手写签名插件jSignature进行相关功能的实现，思路及部分代码如下：
首先下载并引入jSignature插件，下载地址

引入方式如下：

<script src="../../js/jSignature.min.js"></script>

在这里我们只需引入.min.js即可。
由于移动端dpi较高，jSignature插件会出现画布模糊的情况，这里需要用到hidpi-canvas-polyfill
贴上GitHub地址：https://github.com/jondavidjohn/hidpi-canvas-polyfill，引入方式同上。

首先在body标签下定义div用于放置画布

<button id="btn1" type="button">清空</button>
<button id="btn2" type="button">确定</button>
<div id="signatureparent">
    <div id="signature"></div>
    <canvas id="canvas"></canvas>
</div>

这里id为signature的div用于放置手写签名画布，canvas用于重新绘制生成图片。
（由于jSignature生成的为base64格式，如想保存为jpg或png需要在画布上重新绘制保存）

js部分：

$(document).ready(function() {	//初始化
    var arguments = {
        signatureLine: false,	//去除默认画布上那条横线
        lineWidth: '3'
    };
    $("#signature").jSignature(arguments);	//初始化画板，初始化之后就可以进行操作
});

//获取base64数据，生成图片
document.getElementById("btn2").onclick = function(){
    //getData：获取数据
    //reset：复位/重置
    // 获取签名的base64数据对
    var datapair = $("#signature").jSignature("getData","image");
    console.log(datapair);
    var img = new Image();
    img.src = "data:" + datapair[0] + "," + datapair[1];
    
    // 新建canvas画布将背景色改为白色
    canvas = document.getElementById("canvas");
    context = canvas.getContext("2d");
    // 创建新图片
    img.addEventListener("load", function() {
        // 绘制图片到canvas上
	    canvas.width = img.width;
        canvas.height = img.height;
        // 在canvas绘制前填充白色背景
        context.fillStyle = "#fff";
        context.fillRect(0, 0, canvas.width, canvas.height);
        context.drawImage(img, 0, 0);
        // 获取base64并保存成图片
        getBase64(canvas, function(dataUrl) {
            var newImg = document.createElement("img");   
            newImg.src = dataUrl;
            // 将图片保存至本地
            saveImgFile(uuid(),newImg.src,50);
            // 清空画布
            canvas.width = canvas.width;
        });
    }, false);
};

//重置画板
document.getElementById("btn1").onclick = function(){
    $("#signature").jSignature("reset");
};

//canvas画布获取base64数据
function getBase64(canvas, callback) {
    var dataURL = canvas.toDataURL("image/png");
    if(typeof callback !== undefined) {
        callback(dataURL);
    }
};

//将base64保存成图片
function saveImgFile(filename, base64, quality){
    var bitmap = new plus.nativeObj.Bitmap("test");
    // 从本地加载Bitmap图片
    bitmap.loadBase64Data(base64, function(){
        console.log('加载图片成功');
        bitmap.save( "_doc/"+localStorage.getItem('loginName')+"/images/"+filename+".png",{overwrite:true,quality:quality},function(i){
            console.log('保存图片成功：'+JSON.stringify(i));
            var w = plus.nativeUI.showWaiting( "保存中..." );
            w.onclose=function(){
                clearInterval(t);
            }
            var n=2;
            var t=setInterval(function(){
                n--;
                w.setTitle("保存成功");
                if(n<=0){
                    w.close();
                    clearInterval(t);
                    mui.back();
                }
            },1000);
        },function(e){
            console.log('保存图片失败：'+JSON.stringify(e));
            var w = plus.nativeUI.showWaiting( "保存中..." );
            w.onclose=function(){
                clearInterval(t);
            }
            var n=2;
            var t=setInterval(function(){
                n--;
                w.setTitle("保存失败");
                if(n<=0){
                    w.close();
                    clearInterval(t);
                    mui.back();
                }
            },1000);
        });
    },function(e){
	    console.log('加载图片失败：'+JSON.stringify(e));
    });
}

实际效果：
效果

最后附上一篇中文开发手册：
https://www.cnblogs.com/zx-admin/p/6828350.html