App上实现用户手写签名保存为透明PNG格式图片

需求：

App上实现用户手写签名保存为透明PNG格式图片

1、引入依赖

<script type="text/javascript" src="../libs/jquery.js"></script> 
<script type="text/javascript" src="../libs/jSignature.min.js"></script> 

插件下载地址： jSignature.js

2、初始化

var arguments = {
            width: '100%',
            height: '220px',
            color:'#333333',
            "decor-color": "transparent",//去除默认画布上那条横线
            lineWidth: '2'
        };

//初始化签名插件
$("#signature").jSignature(arguments);

3、保存、重写

if(page.touchcount>1){    //业务需求至少手绘2笔才保存
//将画布内容转换为图片
var datapair = $("#signature").jSignature("getData", "image");
var i = new Image();
i.src = "data:" + datapair[0] + "," + datapair[1];
//采用md5命名（这里使用MD5命名是因为，当使用统一名字替换保存图片，因文件名没变，图片显示不会刷新。MD5加密方法自己百度）
var sginName = csui.base.getMd5(i.src);
var url = '_downloads/'+sginName+'.png';    //设置保存图片文件名
var bitmap = new plus.nativeObj.Bitmap();     
      bitmap.loadBase64Data(i.src, function () {
      bitmap.save(url, { overwrite: false, format: "png", quality: 60 }
            , function (i) {
                    console.log('保存图片成功：' + JSON.stringify(i));
                    //var path = i.target    及为保存到本地图片地址
                    //删除前一张
                    plus.io.resolveLocalFileSystemURL( “前一张图片地址”,  function(entry){
                                entry.remove(function(){
                                    console.log('删除成功');
                                });
                    );
                    bitmap.clear(); 
            }, function (e) {
                mui.toast('保存图片失败：' + JSON.stringify(e));
                bitmap.clear();
            });
        }, function () {
            mui.toast('加载Base64图片数据失败：' + JSON.stringify(e));
            bitmap.clear();
        });
}else{
    mui.toast('请完成签名后再试')
}

//重绘

// 清空签字版
$("#signature").jSignature("reset"); 

//签名change事件

$("#signature").bind('change', function(e){
    page.touchcount++    //保存手写笔画数
})