jSignature 플러그인을 사용하여 서명 패드를 만들고 그림으로 저장하는 방법
- 韦小宝원래의
- 2018-03-19 17:41:084450검색
오늘 이야기할 내용은 jquery 플러그인 jSignature를 사용하여 필기 패드 서명 기능을 만들고 서명 필기를 사진으로 저장하는 것입니다. 다음은 편집기를 따라가는 실제 사례입니다.
1단계: 환경 준비
jquery, jSignature
2단계: 데모 작성
<!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="保存" id="yes"/>
<input type="button" value="下载" id="download"/>
<input type="button" value="重写" id="reset"/>
<p id="someelement"></p>
<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 $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).appendTo($("#someelement")); // append the image (SVG) to DOM.
});
//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>3단계: 테스트
테스트 후 성공!
위 내용은 jSignature 플러그인을 사용하여 서명 패드를 만들고 그림으로 저장하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.