javascript - 能否不發送請求下載，而用js實作<img>元素另存為

Question

雷雷

Answer 1

我一開始想的也是canvas，不過看到題主已經試過了。其他的我還沒想到什麼辦法。

但針對你說的“文件體積過大”，如果你是將圖片用canvas轉換成了base64的話，那麼可能是因為你把圖片格式設置成了png格式，比如：

canvas.toDataURL('image/png')

如果是這樣的話，那麼你可以轉換成jpeg格式，並且可以控制轉換品質，這樣保存下來就小了。如：

canvas.toDataURL('image/jpeg',0.5);

我感覺這樣的話，在體積上應該不存在問題了。

ps：樓上所說a標籤的download屬性，我用過，但對題主的狀況來說可能有點問題。

1.可能仍舊需要請求。如果download屬性能從快取中讀取圖片來保存，那麼對於有快取的圖片可能不需要請求（其實我尚不清楚其是否有讀取快取圖片的機制，也許根本沒有）。但對於大圖片，即使在網頁裡加載完了，用download屬性下載還需要從伺服器下載。

<a href="https://files.yande.re/image/eb619bf8aff0bd440ec724211fce245c/yande.re%20389825%20dress%20elf%20erect_nipples%20makita_yoshiharu%20no_bra%20nopan%20open_shirt%20pointy_ears%20see_through%20skirt_lift.jpg" download="a.jpg">xxxxx</a>
<br>
<img src="https://files.yande.re/image/eb619bf8aff0bd440ec724211fce245c/yande.re%20389825%20dress%20elf%20erect_nipples%20makita_yoshiharu%20no_bra%20nopan%20open_shirt%20pointy_ears%20see_through%20skirt_lift.jpg">

2.download屬性在firefox裡，需要href裡的檔案和目前網頁的網域同源，否則不會下載。不過從題主的情況來看，應該是同源的，不存在這問題。

3.

Answer 2

a標籤download屬性可以支持，但是有相容性問題；更好的支援一般需要服務端完成。