Html5 canvas 应用于webkit浏览器兑现电子签名 _Web前端

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

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

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

代码如下：

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#canvas{ border:1px solid #ccc;}
</style>
</head>

<body>
<div id="canvasDiv"></div>
<button id="btn_clear">Clear</button>
<button id="btn_submit">Submit</button>
<script language="javascript">
var canvasDiv = document.getElementById('canvasDiv');
var canvas = document.createElement('canvas');
var canvasWidth = 600, canvasHeight=400;
var point = {};
point.notFirst = false;

canvas.setAttribute('width', canvasWidth);
canvas.setAttribute('height', canvasHeight);
canvas.setAttribute('id', 'canvas');
canvasDiv.appendChild(canvas);

if(typeof G_vmlCanvasManager != 'undefined') {

	canvas = G_vmlCanvasManager.initElement(canvas);
}
var context = canvas.getContext("2d");


canvas.addEventListener("mousedown", function(e){
  var mouseX = e.pageX - this.offsetLeft;
  var mouseY = e.pageY - this.offsetTop;
  paint = true;
  addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
  redraw();
});

canvas.addEventListener("mousemove", function(e){
  if(paint){
    addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
    redraw();
  }
});

canvas.addEventListener("mouseup", function(e){
  paint = false;
});

canvas.addEventListener("mouseleave", function(e){
  paint = false;
});

var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;

function addClick(x, y, dragging)
{
  clickX.push(x);
  clickY.push(y);
  clickDrag.push(dragging);
}

function redraw(){
  //canvas.width = canvas.width; // Clears the canvas
  
  context.strokeStyle = "#df4b26";
  context.lineJoin = "round";
  context.lineWidth = 5;
  
  while (clickX.length > 0 ) {
	  point.bx = point.x;
	  point.by = point.y;
	  point.x = clickX.pop();
	  point.y = clickY.pop();
	  point.drag = clickDrag.pop();
	  context.beginPath();
	  if (point.drag && point.notFirst) {
		  context.moveTo(point.bx, point.by);
	  } else {
		  point.notFirst = true;
		  context.moveTo(point.x - 1, point.y);
	  }
     context.lineTo(point.x, point.y);
     context.closePath();
     context.stroke();
  }
/*
  for(var i=0; i < clickX.length; i++)
  {		
    context.beginPath();
    if(clickDrag[i] && i){
      context.moveTo(clickX[i-1], clickY[i-1]);
     }else{
       context.moveTo(clickX[i]-1, clickY[i]);
     }
     context.lineTo(clickX[i], clickY[i]);
     context.closePath();
     context.stroke();
  }
  */
}
var clear = document.getElementById("btn_clear");
var submit = document.getElementById("btn_submit");
clear.addEventListener("click", function(){
	canvas.width = canvas.width;
});

submit.addEventListener("click", function(){
	alert(canvas.toDataURL("image/png"));
});
</script>
</body>
</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变革？