请按着鼠标写字签名。

$(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‘});

}

2.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));

?>

jSignature手写签名

标签：