今天要讲的是使用jquery插件jSignature做一个手写板签字的功能，并将签字笔迹保存为图片。
第一步：环境准备
jquery、jSignature
第二步：demo编写
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
<!
DOCTYPE
html>
<
html
lang="zh-CN">
<
head
>
<
title
>手写板签名demo</
title
>
<
meta
http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<
meta
charset="UTF-8">
<
meta
name="description" content="overview & stats" />
<
meta
name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
</
head
>
<
body
>
<
div
id="signature"></
div
>
<
p
style="text-align: center">
<
b
style="color: red">请按着鼠标写字签名。</
b
>
</
p
>
<
input
type="button" value="保存" id="yes"/>
<
input
type="button" value="下载" id="download"/>
<
input
type="button" value="重写" id="reset"/>
<
div
id="someelement"></
div
>
<
script
src="jquery-2.0.3.min.js"></
script
>
<!--[if lt IE 9]>
<script src="jSignature/flashcanvas.js"></script>
<![endif]-->
<
script
src="jSignature/jSignature.min.js"></
script
>
<
script
>
$(function() {
var $sigdiv = $("#signature");
$sigdiv.jSignature(); // 初始化jSignature插件.
$("#yes").click(function(){
//将画布内容转换为图片
var datapair = $sigdiv.jSignature("getData", "image");
var i = new Image();
i.src = "data:" + datapair[0] + "," + datapair[1];
$(i).appendTo($("#someelement")); // append the image (SVG) to DOM.
});
//datapair = $sigdiv.jSignature("getData","base30");
//$sigdiv.jSignature("setData", "data:" + datapair.join(","));
$("#download").click(function(){
downloadFile("a.png", convertBase64UrlToBlob($("img").attr("src")));
});
$("#reset").click(function(){
$sigdiv.jSignature("reset"); //重置画布，可以进行重新作画.
$("#someelement").html("");
});
});
function downloadFile(fileName, blob){
var aLink = document.createElement('a');
var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", false, false);//initEvent 不加后两个参数在FF下会报错, 感谢 Barret Lee 的反馈
aLink.download = fileName;
aLink.href = URL.createObjectURL(blob);
aLink.dispatchEvent(evt);
}
/**
* 将以base64的图片url数据转换为Blob
* @param urlData
* 用url方式表示的base64图片数据
*/
function convertBase64UrlToBlob(urlData){
var bytes=window.atob(urlData.split(',')[1]); //去掉url的头，并转换为byte
//处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i <
bytes.length
; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob( [ab] , {type : 'image/png'});
}
</script>
</
body
>
</
html
>
|
第三步：测试
经测试，成功！