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

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

 

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


Html5 canvas 应用于webkit浏览器实现电子签名_第1张图片

代码如下:

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

Html代码   收藏代码
  1. >  
  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">Clearbutton>  
  14. <button id="btn_submit">Submitbutton>  
  15. <script language="javascript">  
  16. var canvasDiv = document.getElementById('canvasDiv');  
  17. var canvas = document.createElement('canvas');  
  18. var canvasWidth = 600canvasHeight=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等等都能用她实现。。

各种检测: http://diveintohtml5.org/detect.html

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

html5是一次web变革?


 

 

  • canvas_pad.rar (2.1 KB)
  • 下载次数: 33
  • 查看图片附件

你可能感兴趣的:(C#,NET,php,微信公众平台,手机开发)