摘要：
DOCTYPE html˃手写板签名演示请按这是一个很好的例子使用鼠标进行写入并签名$（function（）｛var$sigp=$（”#signature“）；$sigp.jSignature（）；//初始化jSignature插件。$（“#yes”）。click（function）｛//将画布内容转换为图像vardatapair=$sigp.j signature（”getData“，”image“）；vari=newImage（）；i.src=”data:“+datapair[0]+”，”+datapair[1]；i.image=datapair[1]；$（i）.appendTo（$（”#someelement“））；//appendtheimage”（SVG）到DOM。警报（encodeURIComponent（i.image））；vart=newDate（）；$。Ajax（｛url:“/2。php？T=“+T，//dataType:”json“，contentType:”application/json；charset=utf-8“，data:”｛“image_data”：”“+encodeURIComponent+”“｝”，//避免base64长度过大，json传输类型：”post“，缓存：false，成功：函数｛if｛alert；｝else｛alert；｝｝）；｝）//数据对=$sigp.jSignature；//$sigp.j Signature；$.click；$.cclick；｝；FunctiondownloadFile｛varaLink=document.createElement（'a'）; varevt=文档。创建事件；evt.initEvent//不带最后两个参数的initEvent将在FF下报告错误。感谢BarretLee的反馈aLink。download=文件名；a链接。href=URL。创建对象URL；a链接。dispatchEvent；}/***将base64的图像url数据转换为Blob*@paramurlData*base64图像数据，以url*/functionconvertBase64UrlToBlob｛varbytes=window.atob；//删除url的标头并将其转换为byte//处理异常，将小于0的ascii代码转换为大于0的varab=newArrayBuffer；var=newUint8Array；for｛ia[i]=bytes.charCodeAt；｝returnnewBlob；｝2.php˂？php$image_data=json_decode；//您只能以这种方式接收$data=rawurldcode$file_name=time（）.'。png'；//必须png$a=file_put_contents；？
<!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>
<p id="signature"></p>
<p style="text-align: center">
<b style="color: red">请按着鼠标写字签名。</b>
</p>
<input type="button" value="保存" />
<input type="button" value="下载" />
<input type="button" value="重写" />
<p id="someelement"></p>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/jSignature/2.1.3/flashcanvas.js"></script>
<![endif]-->
<script src="https://cdn.bootcss.com/jSignature/2.1.3/jSignature.min.js"></script>
<script>
$(function() {
var $sigp = $("#signature");
$sigp.jSignature(); // 初始化jSignature插件.
$("#yes").click(function(){
//将画布内容转换为图片
var datapair = $sigp.jSignature("getData", "image");
var i = new Image();
i.src = "data:" + datapair[0] + "," + datapair[1];
i.image = datapair[1];
$(i).appendTo($("#someelement")); // append the image (SVG) to DOM.
alert(encodeURIComponent(i.image));
var t = new Date();
$.ajax({
url: "/2.php?t="+t,
//dataType: "json",
contentType: "application/json; charset=utf-8",
data: "{"image_data":"" + encodeURIComponent(i.image) + ""}",//避免base64长度过大，json传输
type: "post",
cache: false,
success: function (msg) {
if (msg.code === 1) {
alert("上传成功");
} else {
alert("上传失败");
}
}
});
});
//datapair = $sigp.jSignature("getData","base30");
//$sigp.jSignature("setData", "data:" + datapair.join(","));
$("#download").click(function(){
downloadFile("a.png", convertBase64UrlToBlob($("img").attr("src")));
});
$("#reset").click(function(){
$sigp.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>
2.php
<?php
$image_data = json_decode(file_get_contents('php://input'), true); //只能这样接收
$data = rawurldecode($image_data['image_data']);
$file_name = time().'.png'; //必须png
$a = file_put_contents($file_name, base64_decode($data));
?>