web页面-电子签名

html

<canvas id="canvas" style="border:none ;"></canvas><div class="clearBtn" ng-click="clearDrew()">重新签名</div>
<div class="saveBtn" ng-click="saveDrew()">确认签订</div>

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 = 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());}

web页面-电子签名相关推荐

java实现页面高效刷新_selenium高效应对Web页面元素刷新的实例讲解
当我们在页面上进行selenium.type()或者selenium.click()操作的时候,往往需要需要等待一个元素的出现,对于一般的网页,当我们进入一个新页面的时候,往往会使用selenium. ...
ASP.NET Web页面(.aspx)添加用户控件(.ascx)无显示的问题
写好的用户控件点击视图显示没有问题,但是将控件添加到Web窗体上时却显示如下图标: F5运行,查看源代码:有代码--但是页面却显示一片空白. 分析代码,比较了一下能显示用户控件的其他web页面以及代码 ...
像数据分析一样写 Web 页面，这个 Python 库做到了！
作者|刘早起来源|早起Python 提起用 Python 写一个 web 页面,总是会想起Django/Flask等这样的大家伙. 他们确实好用,但就是流程繁琐,比如有时就想写一个简单的页面,比如问 ...
用服务器安装nginx部署web页面
作为一个野生的iOSer,技术栈好像还没到这么远,平时也用不太到,主要最自学的几个方面碰巧联系在了一起,因为爱好吧,就研究了下.对了还有戴铭做的那个iOS高阶晋级网课,我也打算订阅一份,并且每章带有我 ...
分分钟教会你使用HTML写Web页面
在学习怎样使用HTML编写网页之前,我们必须先搞清楚什么是HTML?当然了不是系统的给大家介绍HTML的前世今生,假设对其身世感兴趣的小伙伴能够去问度娘,她会给你想要的答案. 所谓HTML,就是我们常 ...
html右键禁用和web页面中添加加入qq群的方式
需求: html禁用右键,防止定位csspath和xpath,同时需要在web页面中加入添加加入qq群的图标实现: html禁用右键:利用oncontextmenu <!doctype htm ...
PHP学习笔记-PHP与Web页面的交互2
转载请标明出处: http://blog.csdn.net/hai_qing_xu_kong/article/details/51761308 本文出自:[顾林海的博客] 前言在<PHP学习笔 ...
一个Web页面的问题分析
一个Web页面的问题分析几个月之前我接到一个新的开发任务,要在一个旧的Web页面上面增添一些新的功能.在开发的过程中发现旧的代码中有很多常见的不合适的写法,结合这些问题,如何写出更好的,更规范的,更 ...
[原]iOS中 Web 页面与 Native Code 的一种通信方式
在 iOS 开发中,Web 页面与 Native Code 通信可以分为两个方面: 1.Native Code 调用 Web 页面的方法:主要是调用页面中的 Javascript 函数. 2.Web ...

web页面-电子签名

web页面-电子签名相关推荐

最新文章

热门文章