html5图片保存,HTML5 canvas画图并保存成图片的jcanvas插件

使用了jcanvas插件。

复制代码代码如下:

var maxX=-1;

var maxY=-1;

var minX=99999;

var minY=99999;

function checkData(event){

var x=event.pageX-$('canvas').offset().left;

var y=event.pageY-$('canvas').offset().top;

if(x>maxX){

maxX=x;

}else if(x

minX=x;

}

if(y>maxY){

maxY=y;

}else if(y

minY=y;

}

}

$(function(){

var obj=$('canvas');

var temp_e;

var temp_draw=false;

obj.on({

mousedown:function(e){

temp_e=e;

temp_draw=true;

checkData(e);

},

mousemove:function(e){

if(temp_draw){

obj.drawLine({

strokeStyle: '#000',

strokeWidth: 3,

x1: temp_e.pageX-$('canvas').offset().left, y1: temp_e.pageY-$('canvas').offset().top,

x2: e.pageX-$('canvas').offset().left, y2: e.pageY-$('canvas').offset().top,

});

}

temp_e=e;

checkData(e);

},

mouseup:function(e){

temp_e=null;

temp_draw=false;

checkData(e);

},

mouseout:function(){

temp_e=null;

temp_draw=false;

}

});

$("#clean").on("click",function(){

maxX=-1;

maxY=-1;

minX=99999;

minY=99999;

obj.clearCanvas();

});

$("#save").on("click",function(){

var image=obj.getCanvasImage("png");

alert(image);

});

});