<!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>MobilephoneSign</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(){
//canvascanvas.width = canvas.width; // Clears the canvas
context.strokeStyle = "#df4b26";
context.lineJoin = "round";
context.lineWidth = 5;
while (clickX.length > 0 ) {
pointpoint.bx = point.x;
pointpoint.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(){
canvascanvas.width = canvas.width;
});
submit.addEventListener("click", function(){
alert(canvas.toDataURL("image/png"));
});
</script>
</body>
</html>
绘图就不说，关键点就是后面的canvas.toDataURL("image/png")，这个方法会返回当前图片被base64编码的字符串
只需在服务端拿到这个字符串解码便可以还原成图片。