JavaScript实现移动端签字功能
【JavaScript实现移动端签字功能】本文实例为大家分享了JavaScript实现移动端签字功能的具体代码，供大家参考，具体内容如下
一、html部分
验收人签字:
myCanvas是签字的div，saveImgDiv是保存后回显的div。
二、页面初始化，添加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; }
三、获取图片路径放到saveImgDiv里，签字回显逻辑
var file = "http://10.1.31.173:8097/upload/" + iv[0].zjqm + "?v=" + new Date().getTime(); $("#saveImgDiv").append('
文章图片
');
四、保存用户签名，可以放在保存提交成功的回调里
var saveimgs = document.getElementsByClassName("saveimgs")[0]; //保存签名图片var image = c.toDataURL("image/png"); var ctximg = document.createElement("span"); ctximg.innerHTML = "
文章图片
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
推荐阅读
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- MybatisPlus使用queryWrapper如何实现复杂查询
- python学习之|python学习之 实现QQ自动发送消息
- 事件代理
- 孩子不是实现父母欲望的工具——林哈夫
- opencv|opencv C++模板匹配的简单实现
- Node.js中readline模块实现终端输入
- java中如何实现重建二叉树
- 移动端h5调试方法
- 数组常用方法一