canvas導出圖片方法總結

html代碼

<canvas id="canvas" width="100" height="100" ></canvas>

js 代碼

var canvas=document.getElementById("canvas");

var ctx=canvas.getContext("2d");

ctx.fileStyle="gray";

ctx.fillReact(0,0,100,100);

1.直接調用canvas對象的toDataURL方法轉化為指定類型

var newImg = new Image();

newImg.src=canvas.toDataURL("image/png"));

2.利用canvas對象的toBlob方法

先通過toBlob將canvas對象轉化為二進制對象，通過參數形式傳入函數，然后利用URL.createObjectURL方法根據傳入的參數創建一個指向該參數blob對象的url,然后把url賦給img的src屬性即可

canvas.toBlob && canvas.toBlob(function(blob) {

　　var url = URL.createObjectURL(blob);

　　var newImg = new Image();

　　newImg.onload = function() {

　　　  URL.revokeObjectURL(url)

　　};

　　newImg.src=url;

};

 URL.revokeObjectURL()方法會銷毀一個通過URL.createObjectURL()創建的對象URL. 當你要把url賦給newImg之后,並且瀏覽器已經onload成功這個img,那么此時就再不需要指向blob對象的url,這個時候就應該把這個對象銷毀掉，避免占用內存。