前端知识|web页面-电子签名前端知识|javascript

html

重新签名确认签订

【前端知识|web页面-电子签名】angularjs 框架 - js

var lastX, lastY; var canvasW = document.body.clientWidth - 70; console.log(document.body.clientWidth) var ctx = document.getElementById("canvas").getContext("2d"); var c = document.getElementById("canvas"); $scope.hasTips = true; $scope.$on('$ionicView.afterEnter', function () {//进入页面执行 InitThis(); $scope.clearDrew(); drawTips(true); }, false); var barHeight = 44; //biao //显示or清空 '最佳书写区' function drawTips(flag) { if (flag) { ctx.fillStyle = "#aaa"; ctx.font = "14px Arial"; ctx.fillText("最佳书写区", (canvasW - 70) / 2, 80); ctx.stroke(); } else { ctx.clearRect(0, 0, canvasW, 200); } } function InitThis() { //触摸屏 c.addEventListener('touchstart', function (event) { if ($scope.hasTips) { drawTips(false) } if (event.targetTouches.length == 1) { event.preventDefault(); // 阻止浏览器默认事件，重要 var touch = event.targetTouches[0]; mousePressed = true; console.log(event) Draw(touch.pageX - this.offsetLeft, touch.pageY - this.offsetTop - barHeight, false); }}, false); c.addEventListener('touchmove', function (event) { if (event.targetTouches.length == 1) { event.preventDefault(); // 阻止浏览器默认事件，重要 var touch = event.targetTouches[0]; if (mousePressed) { Draw(touch.pageX - this.offsetLeft, touch.pageY - this.offsetTop - barHeight, true); } } }, false); c.addEventListener('touchend', function (event) { if (event.targetTouches.length == 1) { event.preventDefault(); // 阻止浏览器默认事件，防止手写的时候拖动屏幕，重要 //var touch = event.targetTouches[0]; mousePressed = false; } }, false); //鼠标 c.onmousedown = function (event) { mousePressed = true; Draw(event.pageX - this.offsetLeft, event.pageY - this.offsetTop - barHeight, false); }; c.onmousemove = function (event) { if (mousePressed) { Draw(event.pageX - this.offsetLeft, event.pageY - this.offsetTop - barHeight, true); } }; c.onmouseup = function (event) { mousePressed = false; }; } function Draw(x, y, isDown) { y = y * 0.8; if (isDown) { ctx.beginPath(); ctx.strokeStyle = '#333'; //颜色 ctx.lineWidth = 3; //线宽 ctx.lineJoin = "round"; ctx.moveTo(lastX, lastY); ctx.lineTo(x, y); ctx.closePath(); ctx.stroke(); $scope.hasTips = false; } lastX = x; lastY = y; } //清空内容 $scope.clearDrew = function () { ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); $scope.hasTips = true; // drawTips(true); } //保存签名内容 $scope.saveDrew = function () { if ($scope.hasTips) { CommonService.alertPop("温馨提示", "请签名。"); return; } var a = document.createElement("canvas"); a.href = https://www.it610.com/article/canvas.toDataURL("image/png"); var base64 = a.href.substr(22); if ($scope.Signatrue) { $state.go("elecSealConfirm", { base64: base64, id: "1", sealType: "own" }) } else { uploadFileCloud(base64) }console.log(canvas.toDataURL()); }