移动端网页签名,附上DOM,效果图
作者:互联网
附上效果图
附上代码DOM
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<title>手写签字</title>
<script src="js/jquery.min.js"></script>
<!-- <script type="text/javascript" src="js/flashcanvas.js"></script> -->
<script src="js/jSignature.min.js"></script>
<script type="text/javascript">
$(function(){
//初始化插件
var dHeight = "300px";
var dWidth = document.body.scrollWidth ;
$("#signature").jSignature({height:dHeight,width:dWidth, signatureLine:false});//初始化调整手写屏大小
})
//输出签名图片
function jSignatureTest(){
var $sigdiv = $("#signature");
// $sigdiv.jSignature() // inits the jSignature widget.
// after some doodling...
// $sigdiv.jSignature("reset") // clears the canvas and rerenders the decor on it.
var datapair = $sigdiv.jSignature("getData", "svgbase64")
console.log(datapair);
// datapair = ["image/svg+xml;base64","PD94bWwgdmVyc2lvbj0iMS4wIi
// BlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2Zy
// BQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My
// 5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHhtbG5zPS
// JodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIiB3aWR0aD
// 0iMzEiIGhlaWdodD0iMzQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMD
// AwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm
// 9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0gMSAxIGMgMC4xMiAwLjExIDUuMDEgMy
// 43NiA3IDYgYyAzLjI1IDMuNjUgNS43MSA4LjM1IDkgMTIgYyAyLjY0IDIuOTMgNi
// 4zNyA1LjE2IDkgOCBjIDEuNTggMS43IDQgNiA0IDYiLz48L3N2Zz4="]
var i = new Image();
i.src = "data:" + datapair[0] + "," + datapair[1]
$(i).appendTo($("#image")) // append the image (SVG) to DOM.
}
function reset(){
var $sigdiv = $("#signature");
$sigdiv.jSignature("reset");
$("#image img").remove();
}
</script>
</head>
<body>
<div id="signature" style="width: 100%;height: 300px;border: 1px solid #ccc;margin: 10px 0px;"></div>
<button type="button" οnclick="jSignatureTest()">生成签名</button>
<button type="button" οnclick="reset()">清除签名</button>
<div id="image" style="margin:20px"></div>
</body>
</html>
标签:附上,jSignature,DOM,image,datapair,sigdiv,效果图,var 来源: https://blog.csdn.net/PLB1314/article/details/114664921