HTML5如何保存畫布？ HTML5保存畫布方法

本篇文章帶給大家的內容是關於HTML5如何保存畫布？ HTML5保存畫布方法，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

好不容易在畫布中畫出酷炫的圖形，應該要把它保存起來吧。但不幸的是，畫布中的這些圖形本身並不是真正的圖片，不能直接保存。不幸中的萬幸，Canvas API提供了toDataURL()方法，可以把畫布中的圖形轉換成圖片。

預設情況下，toDataURL()方法把圖形轉換成base64編碼格式的png，然後回傳Data URL資料。可以給toDataURL()傳入MIME類型的參數，將畫布轉變成其它格式的圖片。

有了Data URL資料後，就可將這些資料直接填入元素裡，或是直接從瀏覽器下載它們。這裡透過一個實例，來說明如何使用toDataURL()方法，把整個畫布儲存為圖片。

HTML程式碼如下：

<button onclick=toDataURL("image/png")>显示为png图片</button>
<button onclick=toDataURL("image/jpeg")>显示为jpg图片</button>
<canvas id="canvas" width="200" height="200"></canvas>
<img id="image"/>

Javascript程式碼如下：

function toDataURL(mime) {
   var canvas = document.getElementById("canvas");
   var image = document.getElementById("image");
   image.src = canvas.toDataURL(mime);
}

上述程式碼中，當使用者點擊按鈕「顯示為png圖片」或「顯示為jpg圖片」時，會呼叫toDataURL()方法，把畫布中的內容產生圖片，填入img標籤中供使用者下載。

1、toDataURL()方法是畫布元素本身的方法，而非畫布上下文物件的方法。

2、toDataURL()方法儲存圖片的預設格式是"image/png"，瀏覽器對其他格式支援不是很好。如，Google Chrome瀏覽器41.0.2272.118版本也支援"image/jpeg"格式，但不支援"image/gif"格式。

2、現代瀏覽器已經支援在Canvas上右鍵，把畫布另存為圖片，不過會按預設的"image/png"格式儲存。當然，可以透過編程，呼叫toDataURL()方法，傳入MIME類型的參數，並將其儲存為其它格式。

以上就是對HTML5如何保存畫布？ HTML5保存畫布方法的完整介紹，如果您想了解更多有關Html5影片教學，請追蹤PHP中文網。

以上是HTML5如何保存畫布？ HTML5保存畫布方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！