346 字
2 分鐘
下載 Blob 圖片，以 HyRead 為例
HyRead 是我平常就有在用的電子書平台，提供網頁、App 閱讀的方式。網頁版的電子書是以圖片來傳輸，且受到 DRM 保護。原始載入的圖片是有加密的，透過前端進行解密，並顯示在網頁上。除了螢幕截圖外，有沒有程式化的方法可以將它下載下來？目前想到兩個方法：
- 研究 JS 解密原理，重新實做一遍
- 將已經解密的圖片下載下來
顯然方法二比較簡單，來說明如何實現
HyRead 的圖片加密
這裡以試閱模式為例，我們先觀察他的圖片從哪裡下載，會發現有一個大檔案，從下面這路徑被下載，而且是加密過的圖片，網頁透過前端進行解密。
https://service.ebook.hyread.com.tw/ebookservice/comic/isTrialxx/xxx
再來到 HTML 發現該圖片的路徑是 blob 開頭如下圖所示，但是點開圖片連結是無效的，原因為這是透過前端解密後塞進去的。
Blob 下載
我們透過前端存取解密後的圖片，並將內容放到 Canvas 中，就可以匯出圖片的 Base64。
var image = document.querySelectorAll("img")[1];var canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');canvas.width = image.naturalWidth;canvas.height = image.naturalHeight;ctx.drawImage(image, 0, 0);
var base64String = canvas.toDataURL('image/png');
要下載的圖片的話，可以透過以下語法
var downloadLink = document.createElement('a');downloadLink.href = base64String;downloadLink.download = 'image.png';downloadLink.click();