iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 15
1
Modern Web

用 Javascript 當個影像魔術師系列 第 15

Day 15 - 圖片保存 Part 2 & 小結

Day 15 - 圖片保存 Part 2

圖片保存

昨天介紹到了使用 daraUrl 來完成圖片下載,但到最後面發現當圖片超過一定大小時,會無法成功下載,今天就來介紹另一個方法吧!

Blob

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 可以成功下載,搞定!

所以最後總結一下兩者差別

  • dataURL(base64)
    • 平均來說編碼後體積會比原圖大 1 / 3
    • 因為是把編碼直接寫在 CSS或者 HTML 裡面,所以檔案體積也會相對增加
    • 同樣的編碼,可以拿到其他地方使用
    • 下載有長度限制
  • blob
    • 創建完的位置需要手動刪除
    • 同樣的位置,不能拿到其他地方使用
    • 目前看起來下載可以承受的大小比上面多

兩者都可以拿來做圖片預覽、下載使用,但考慮到下載大小限制,目前看起來第二種方法是比較妥當,至於如果只是要拿來當作上傳前的預覽的話兩者應該沒啥差別

小結

這個就是喀什米爾羊毛本尊啦!!在道路旁邊都是一群一群的~

這兩天介紹了圖片下載,踩了一些坑,也介紹了平常很少用到的兩種編碼格式,自己也收穫許多呢~

其實透過一些參數的調整 (例如畫值、或是控制 Canvas的寬高,就可以做出圖片縮放或裁剪的效果),這邊就留給大家自行發揮啦~

而到這邊到一半,目前使用 JS 調整影像的功能大致上已經完成。

DEMO

目前有的功能

前面幾篇也介紹了 Canvas 的基本操作及色彩圖學上的基本概念

雖然做出來的效果跟功能還是跟真的 Photoshop 有差距,也因為蠻多東西是自己照著 Photoshop 裡面的調整來猜實作,所以在算法部分僅供參考,但最重要的是透過這些實踐,瞭解到背後原理可能是用什麼方式調整,接下來會在介紹一些其他影像使用方式,及調整效能的部分,明天見!


上一篇
Day 14 - Canvas 圖片保存 Part 1
下一篇
Day 16 - CSS 原生濾鏡
系列文
用 Javascript 當個影像魔術師30

尚未有邦友留言

立即登入留言