js 畫布與圖片的相互轉化(canvas與img)

使用js將圖片拷貝進畫布

//將圖片對象轉化爲畫布，返回畫布
function ImageToCanvas(image) {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);//0, 0參數畫布上的座標點，圖片將會拷貝到這個地方
return canvas;
}

 

使用js將畫布轉化爲圖片

//將畫布轉化爲圖片

function canvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");

//在此處也可使用js的appendChild()方法將此img加入html頁面

//return image;
}

 

 

參考地址：http://blog.csdn.net/muzi187/article/details/53020172