昨天介紹到了使用 daraUrl 來完成圖片下載，但到最後面發現當圖片超過一定大小時，會無法成功下載，今天就來介紹另一個方法吧！
Canvas 有另一個方法 toBlob，這個方法會回傳一個 Blob ，而我們一樣可以使用這個來做出下載。
根據 MDN 定義
Blob（Binary Large Object）物件代表了一個相當於檔案（原始資料）的不可變物件。Blob 中的資料並不一定是 JavaScript 原生的格式。
簡單來說，可以把他想像成類似檔案的二進制資料，我們可以將圖片、文件、影片等等轉成這種格式，在透過其他方式來作使用。
所以改成這樣子使用
canvas.toBlob(
blob => {
console.log(blob)
const url = URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
link.download = 'yourname.jpeg'
link.click()
// 使用完的物件記得手動清除，不然GC不會幫你清
URL.revokeObjectURL(url)
},
'image/jpeg',
1
)
第一個參數是 callback，二跟三則是跟上面一樣，是格式跟畫值，在裡面我們用了 createObjectURL，他會產生一個來源，類似像這樣
blob:http://localhost:8080/ba84b6ac-1625-4386-ad1b-8380a7ec2361
上面使用了一個新的方法 createObjectURL，可以想像成把 blob 儲存在了瀏覽器裡面，回傳的是他的位置，但也因為是存在瀏覽器裡面，jacascript 本身的回收機制沒辦法偵測到這個檔案什麼時候沒有要用，所以如果沒有用的話需要手動用 revokeObjectURL 清理內存，所以接下來就可以跟 base64 一樣直接在 img 使用，但要注意一點的是，也因為是存在瀏覽器裡面，所以當頁面關閉時，該位置是無法在被使用的，不像 base64 ，同樣的編碼可以到處使用，也就是說每次要使用，必須要重新創建一個。當然格式也不一定是要用圖片、文件、影片也可以來當作使用，這邊就不在多說
隨便打開一個
Youtube影片，用開發工具觀察後會發現會他的video標籤像是這樣src="blob:https://www.youtube.com/0ef86479-9537-4246-ae2c-39d73133b92e"，可能是為了增加破解難度吧
最後測試一下，目前一個大約 10 MB 的圖片使用 dataUrl 會無法下載，用 toBlob 可以成功下載，搞定！
所以最後總結一下兩者差別
兩者都可以拿來做圖片預覽、下載使用，但考慮到下載大小限制，目前看起來第二種方法是比較妥當，至於如果只是要拿來當作上傳前的預覽的話兩者應該沒啥差別
這個就是喀什米爾羊毛本尊啦！！在道路旁邊都是一群一群的~
這兩天介紹了圖片下載，踩了一些坑，也介紹了平常很少用到的兩種編碼格式，自己也收穫許多呢~
其實透過一些參數的調整 (例如畫值、或是控制 Canvas的寬高，就可以做出圖片縮放或裁剪的效果)，這邊就留給大家自行發揮啦～
而到這邊到一半，目前使用 JS 調整影像的功能大致上已經完成。
目前有的功能
前面幾篇也介紹了 Canvas 的基本操作及色彩圖學上的基本概念
雖然做出來的效果跟功能還是跟真的 Photoshop 有差距，也因為蠻多東西是自己照著 Photoshop 裡面的調整來猜實作，所以在算法部分僅供參考，但最重要的是透過這些實踐，瞭解到背後原理可能是用什麼方式調整，接下來會在介紹一些其他影像使用方式，及調整效能的部分，明天見！
iThome鐵人賽
看影片追技術