实现移动端用户签名功能
一、html部分
验收人签字:
【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 = "
文章图片
推荐阅读
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- UI5|CSS 初学 （五）边框
- html|2、HTML基础之列表和样式
- javascript|JavaScript表单验证
- css|CSS两栏布局的实现和水平垂直居中的实现
- 微信小程序|微信小程序从入门到精通-基础篇（1）
- js面试题|Session和Cookie的区别（js面试题）
- HTML基本标签
- 百度|摆脱后台，翻身前端做主人！
- 网页设计|前端网页设计期末大作业-写真工作室网站(资源链接在文末)