HTML5保存畫布的方法是什么

這篇文章主要介紹HTML5保存畫布的方法是什么，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

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

默認情況下，toDataURL()方法把圖形轉變成base64編碼格式的png，然后返回Data URL數據。可以給toDataURL()傳入MIME類型的參數，將畫布轉變成其它格式的圖片。

有了Data URL數據后，就可將這些數據直接填充到<img>元素里，或者直接從瀏覽器里下載它們。這里通過一個實例，來說明如何使用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保存畫布的方法是什么的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！