您的位置: 首页  >  文章  >  Html5 canvas 应用于webkit浏览器实现电子签名

Html5 canvas 应用于webkit浏览器实现电子签名

分类: 文章 • 2025-02-19 11:39:16

 前段时间做了一个html5的小应用，将电子签名整合到系统的审批中。Html5 canvas 应用于webkit浏览器实现电子签名 还好，发现html5实现起来很方便。

 

webkit浏览器，便可以使用canvas来完成画板签名。如下图


Html5 canvas 应用于webkit浏览器实现电子签名

代码如下：

在网上收集了些资料，稍微整理修改了下，保证copy即可运行。

Html代码  Html5 canvas 应用于webkit浏览器实现电子签名
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>无标题文档</title>  
  6. <style type="text/css">  
  7. #canvas{ border:1px solid #ccc;}  
  8. </style>  
  9. </head>  
  10.   
  11. <body>  
  12. <div id="canvasDiv"></div>  
  13. <button id="btn_clear">Clear</button>  
  14. <button id="btn_submit">Submit</button>  
  15. <script language="javascript">  
  16. var canvasDiv = document.getElementById('canvasDiv');  
  17. var canvas = document.createElement('canvas');  
  18. var canvasWidth = 600, canvasHeight=400;  
  19. var point = {};  
  20. point.notFirst = false;  
  21.   
  22. canvas.setAttribute('width', canvasWidth);  
  23. canvas.setAttribute('height', canvasHeight);  
  24. canvas.setAttribute('id', 'canvas');  
  25. canvasDiv.appendChild(canvas);  
  26.   
  27. if(typeof G_vmlCanvasManager != 'undefined') {  
  28.   
  29.     canvas = G_vmlCanvasManager.initElement(canvas);  
  30. }  
  31. var context = canvas.getContext("2d");  
  32.   
  33.   
  34. canvas.addEventListener("mousedown", function(e){  
  35.   var mouseX = e.pageX - this.offsetLeft;  
  36.   var mouseY = e.pageY - this.offsetTop;  
  37.   paint = true;  
  38.   addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);  
  39.   redraw();  
  40. });  
  41.   
  42. canvas.addEventListener("mousemove", function(e){  
  43.   if(paint){  
  44.     addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);  
  45.     redraw();  
  46.   }  
  47. });  
  48.   
  49. canvas.addEventListener("mouseup", function(e){  
  50.   paint = false;  
  51. });  
  52.   
  53. canvas.addEventListener("mouseleave", function(e){  
  54.   paint = false;  
  55. });  
  56.   
  57. var clickX = new Array();  
  58. var clickY = new Array();  
  59. var clickDrag = new Array();  
  60. var paint;  
  61.   
  62. function addClick(x, y, dragging)  
  63. {  
  64.   clickX.push(x);  
  65.   clickY.push(y);  
  66.   clickDrag.push(dragging);  
  67. }  
  68.   
  69. function redraw(){  
  70.   //canvascanvas.width = canvas.width; // Clears the canvas  
  71.     
  72.   context.strokeStyle = "#df4b26";  
  73.   context.lineJoin = "round";  
  74.   context.lineWidth = 5;  
  75.     
  76.   while (clickX.length > 0 ) {  
  77.       pointpoint.bx = point.x;  
  78.       pointpoint.by = point.y;  
  79.       point.x = clickX.pop();  
  80.       point.y = clickY.pop();  
  81.       point.drag = clickDrag.pop();  
  82.       context.beginPath();  
  83.       if (point.drag && point.notFirst) {  
  84.           context.moveTo(point.bx, point.by);  
  85.       } else {  
  86.           point.notFirst = true;  
  87.           context.moveTo(point.x - 1, point.y);  
  88.       }  
  89.      context.lineTo(point.x, point.y);  
  90.      context.closePath();  
  91.      context.stroke();  
  92.   }  
  93. /*  
  94.   for(var i=0; i < clickX.length; i++)  
  95.   {       
  96.     context.beginPath();  
  97.     if(clickDrag[i] && i){  
  98.       context.moveTo(clickX[i-1], clickY[i-1]);  
  99.      }else{  
  100.        context.moveTo(clickX[i]-1, clickY[i]);  
  101.      }  
  102.      context.lineTo(clickX[i], clickY[i]);  
  103.      context.closePath();  
  104.      context.stroke();  
  105.   }  
  106.   */  
  107. }  
  108. var clear = document.getElementById("btn_clear");  
  109. var submit = document.getElementById("btn_submit");  
  110. clear.addEventListener("click", function(){  
  111.     canvascanvas.width = canvas.width;  
  112. });  
  113.   
  114. submit.addEventListener("click", function(){  
  115.     alert(canvas.toDataURL("image/png"));  
  116. });  
  117. </script>  
  118. </body>  
  119. </html>  

绘图就不说，关键点就是后面的canvas.toDataURL("image/png")，这个方法会返回当前图片被base64编码的字符串
只需在服务端拿到这个字符串解码便可以还原成图片。

既然是webkit浏览器支持canvas，那么用于手机上也没问题，稍微修改mouse事件为touch事件，亲测android2.3.3上的海豚和QQ浏览器都可以。。
但是有个问题，toDataURL目前在android上支持的不是很好，参考http://code.google.com/p/android/issues/detail?id=7901
据说在iphone中支持（未测试）。但是还是有牛肉写了方法自己编码图片，只是效率低了很多，但毕竟能返回数据了。参考附件canvas_pad.html

html5确实比较强大的。这只是一个很小很小的应用。还有很多小游戏，video等等都能用她实现。。Html5 canvas 应用于webkit浏览器实现电子签名


对于IE9以下的支持网上应该是有控件的，我没再研究了。

html5是一次web变革？Html5 canvas 应用于webkit浏览器实现电子签名


 

 

相关推荐