HTML Canvas 元素該怎麼下載呢 – toDataURL()使用介紹

這一篇文章又是我的 Chart JS 之旅遇上的新問題，因為本來就是想要寫個線上圖表顯示嗎

就想說應該還要有個下載功能，就去查了下該怎麼做

補充一下，Chart JS的圖表是顯示在Canvas裡面的

想不到簡單的下載卻還藏著一個坑

toDataURL() 介紹

toDataURL 是一個 canvas 元素獨有的 function，會將canvas 元素回傳一個DataURL物件

簡單來說，就是一個字串，包含了圖片格式以及經過Base64編碼後的影像

共有兩個參數可供傳入 – 分別是 type 以及 encoderOptions

toDataURL()
toDataURL(type)
toDataURL(type, encoderOptions)

• type : 圖片類型，預設為 image/png
• encoderOptions : 圖像品質，介於0到1之間，越大表示越清晰且檔案越大 (*需注意，此參數僅作用於有損壓縮格式的圖片類型，像是 jpeg 以及 webp )

得到的DataURL物件可以用來

• 顯示在頁面上，可以直接用image 或 iframe的src
• 或是可以用下載的方式 – 下面會有範例

為什麼我下載下來/引用的圖片是黑色的!?

來看個簡單的範例

範例中，寫了個動態建立的超連結，並掛上了download屬性，故會直接下載

See the Pen canvas_download_1 by story zyra (@story-zyra) on CodePen.

⬆️大家可以自己試試點擊下載鍵

怎麼會是黑色的呢!!

這是因為圖檔類型的問題呢! 只有jpeg會出現這個問題

看看下面這個範例就知道，改寫了下載 改為用iframe顯示

See the Pen canvas_img_test by story zyra (@story-zyra) on CodePen.

可以看出png以及webp檔都沒有這個問題

去查了下資料，發現jpeg不支援透明背景，不知道是不是因為這個原因導致預設轉換出來會變成黑色的

那解決方法也很簡單，就是自己來畫個背景

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

    ctx.globalCompositeOperation = 'destination-over'
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.globalCompositeOperation = ‘destination-over’ 這一行讓新繪製的背景可以在原有圖形的下面

結論

Canvas 應該在繪製圖表類型時會常常用到，希望這篇文章能帶來些幫助

除了線上報表之外，其實還有寫了一些其他的小功能

希望之後有機會跟大家分享，目前正在尋找合適的虛擬環境

若有幸上線，到時候還請大家多多支持

🧡幫我點一個小小的廣告或留言，都是對我的支持

✅如有任何疑問，歡迎透過留言或messenger讓我知道 !

一些筆記們