脚本宝典收集整理的这篇文章主要介绍了JavaScript实现移动端签字功能,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
本文实例为大家分享了JavaScript实现移动端签字功能的具体代码,供大家参考,具体内容如下
<div class="mui-content-padded"> <div class="mui-inline"><font style="font-family: '微软雅黑';font-Size: 1.2rem;">验收人签字:</font></div> </div> <div class="mui-content-canvasDiv" style="overflow: hidden;"> <canvas id="myCanvas" width="660" height="360" style="border:1px solid #f2f2f2;"></canvas> <div class="saveimgs" id="saveImgDiv"></div> </div>
myCanvas是签字的div,saveImgDiv是保存后回显的div。
InITThis();
VAR mousePressed = false; var lastX, lastY; var ctx = document.getElementById('myCanvas').getContext("2d"); var c = document.getElementById("myCanvas"); var selected1, selected2; function InitThis() { // 触摸屏 c.addEventListener('touchstart', function(event) { console.LOG(1) if(event.targetTouches.length == 1) { event.preventDefault(); // 阻止浏览器默认事件,重要 mousePRessed = true; Draw(event.touches[0].pageX - this.offsetLeft, event.touches[0].pageY - this.offsetTop, false); } }, false); c.addEventListener('touchmove', function(event) { console.log(2) if(event.targetTouches.length == 1) { event.preventDefault(); // 阻止浏览器默认事件,重要 if(mousePressed) { Draw(event.touches[0].pageX - this.offsetLeft, event.touches[0].pageY - this.offsetTop, true); } } }, false); c.addEventListener('touchend', function(event) { console.log(3) if(event.targetTouches.length == 1) { event.preventDefault(); // 阻止浏览器默认事件,防止手写的时候拖动屏幕,重要 mousePressed = false; } }, false); // 鼠标 c.onmousedown = function(event) { mousePressed = true; Draw(event.pageX - this.offsetLeft, event.pageY - this.offsetTop, false); }; c.onmouSEMove = function(event) { if(mousePressed) { Draw(event.pageX - this.offsetLeft, event.pageY - this.offsetTop, true); } }; c.onmouseup = function(event) { mousePressed = false; }; } function Draw(x, y, isDown) { if(isDown) { ctx.beginPath(); ctx.strokeStyle = selected2; ctx.lineWidth = selected1; ctx.lineJoin = "round"; ctx.moveTo(lastX, lastY); ctx.lineto(x, y); ctx.closePath(); ctx.stroke(); } lastX = x; lastY = y; }
var file = "http://10.1.31.173:8097/upload/" + iv[0].zjqm + "?v=" + new Date().getTime(); $("#saveImgDiv").apPEnd('<img src="'+ file + '" style="background:white" width="660" height="360">');
var saveimgs = document.getElementsBy@R_512_402@("saveimgs")[0]; //保存签名图片 var image = c.toDataURL("image/png"); var ctximg = document.createElement("span"); ctximg.innerHTML = "<img src='" + image + "' alt='From canvas'/>"; if(saveimgs.getelementsbytagname('span').length >= 1) { var span_old = saveimgs.getElementsByTagName("span")[0]; saveimgs.replaceChild(ctximg,span_old) } else { saveimgs.appendChild(ctximg); }
效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本宝典。
以上是脚本宝典为你收集整理的JavaScript实现移动端签字功能全部内容,希望文章能够帮你解决JavaScript实现移动端签字功能所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。