需求:
App上实现用户手写签名保存为透明PNG格式图片
1、引入依赖
<script type="text/javascript" src="../libs/jquery.js"></script>
<script type="text/javascript" src="../libs/jSignature.min.js"></script>
插件下载地址:
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++ //保存手写笔画数
})