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

創(chuàng)新互聯(lián)一直秉承“誠(chéng)信做人，踏實(shí)做事”的原則，不欺瞞客戶，是我們最起碼的底線！ 以服務(wù)為基礎(chǔ)，以質(zhì)量求生存，以技術(shù)求發(fā)展，成交一個(gè)客戶多一個(gè)朋友！為您提供成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、成都網(wǎng)頁(yè)設(shè)計(jì)、微信小程序定制開(kāi)發(fā)、成都網(wǎng)站開(kāi)發(fā)、成都網(wǎng)站制作、成都軟件開(kāi)發(fā)、重慶APP開(kāi)發(fā)公司是成都本地專業(yè)的網(wǎng)站建設(shè)和網(wǎng)站設(shè)計(jì)公司，等你一起來(lái)見(jiàn)證！

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

默認(rèn)情況下，toDataURL()方法把圖形轉(zhuǎn)變成base64編碼格式的png，然后返回Data URL數(shù)據(jù)?？梢越otoDataURL()傳入MIME類型的參數(shù)，將畫布轉(zhuǎn)變成其它格式的圖片。

有了Data URL數(shù)據(jù)后，就可將這些數(shù)據(jù)直接填充到<img>元素里，或者直接從瀏覽器里下載它們。這里通過(guò)一個(gè)實(shí)例，來(lái)說(shuō)明如何使用toDataURL()方法，把整個(gè)畫布保存為圖片。

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);
}

上述代碼中，當(dāng)用戶點(diǎn)擊按鈕“顯示為png圖片”或“顯示為jpg圖片”時(shí)，會(huì)調(diào)用toDataURL()方法，把畫布中的內(nèi)容生成圖片，填充到img標(biāo)簽中供用戶下載。

1、toDataURL()方法是畫布元素自身的方法，而非畫布上下文對(duì)象的方法。

2、toDataURL()方法保存圖片的默認(rèn)格式是"image/png"，瀏覽器對(duì)其他格式支持不是很好。如，Google Chrome瀏覽器41.0.2272.118版本也支持"image/jpeg"格式，但不支持"image/gif"格式。

2、現(xiàn)代瀏覽器已經(jīng)支持在Canvas上右鍵，把畫布另存為圖片，不過(guò)會(huì)按默認(rèn)的"image/png"格式保存。當(dāng)然，可以通過(guò)編程，調(diào)用toDataURL()方法，傳入MIME類型的參數(shù)，將其保存為其它格式。

以上是HTML5保存畫布的方法是什么的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道！

網(wǎng)頁(yè)題目：HTML5保存畫布的方法是什么-創(chuàng)新互聯(lián)
文章轉(zhuǎn)載：http://chinadenli.net/article10/icedo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、小程序開(kāi)發(fā)、網(wǎng)站設(shè)計(jì)、面包屑導(dǎo)航、企業(yè)網(wǎng)站制作、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)