手机手写签名 php,jSignature手写签名

这篇博客介绍了如何使用jQuery插件jSignature在手机上实现手写签名功能,并结合PHP进行数据传输和保存。用户可以点击按钮将签名转换为图片并上传到服务器,通过AJAX发送base64编码的图像数据,服务器端接收到数据后保存为PNG文件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

手写板签名demo

请按着鼠标写字签名。

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

?>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值