HTML5 Canvas 基礎(七) 生成圖片- toDataURL

要把 canvas 的內容轉成圖片,只要透過 toDataURL 就可以了,toDataURL可以再設定圖片的格式和品質,如:

canvas.toDataURL("image/jpeg", 1.0); //完整品質

圖片格式預設為 image/png ,解析度則為 96,品質範圍為 0~1,不寫的話預設為 1,像這樣寫就可以把我們繪製好的 canvas 轉成圖片並下載了。

var myImg = document.querySelector("#img1");
myImg.src = canvas.toDataURL("image/png");