【首發(fā)】JS將圖片轉化為base64編碼，并實現(xiàn)點擊下載，js實現(xiàn)圖片下載的實操博客

背景需求

在前端的工作中，經常碰到點擊下載圖片的需求，但是有一種情況大家經常碰到，就是點擊-之后，在瀏覽器窗口默認打開了，并沒有調用瀏覽器進行下載

如果你正在完善這個需求，一直解決不了，恭喜你看到了這篇文章。

在正式開始前，先說一下整體的邏輯

JS實現(xiàn)下載圖片非常簡單，網上有很多的分享

將圖片轉換為base64

為了防止大圖下載失敗，將base64轉換為 blob；

下載圖片。

編碼時間

整體邏輯代碼如下所示

點擊下載圖片

答題時間

很多教程到此就結束了，但是并沒有說明以下幾個問題

'crossOrigin', 'Anonymous'：canvas 跨域問題

如果沒有該內容將會出現(xiàn)錯誤內容：canvas無法執(zhí)行toDataURL方法，即污染的畫布無法輸出，但是這里其實還存在一個問題，就是如果你使用的是 cdn 加速的靜態(tài)圖片，那還是無法跨域，解決的亮點在于配置 CDN HTTP頭配置跨域資源共享（CORS），從而解決該問題，如果你沒有運維權限，可以聯(lián)系運維工程師，在CDN后臺參考下述配置。

一定讓 CDN 的響應頭包含如下配置 Access-Control-Allow-Origin:*，當然僅開啟某些域名跨域訪問也是可以的，看需求。

如果你使用的不是CDN，而是其它服務器，但服務和資源不在一個域名下

以下內容使用 Nginx 進行介紹。

在靜態(tài)資源服務器配置如下內容。

location ^~ /靜態(tài)資源文件夾/ { alias /www/wwwroot/靜態(tài)資源文件夾/; # 開啟允許跨域訪問 add_header 'Access-Control-Allow-Origin' '*'; }

我想，到這里你已經能完成 js 實現(xiàn)圖片下載 這一操作了

這里還會衍生出一個面試問題，你知道 canvas 污染么？

記錄時間

2022年度 Flag，寫作的

563

/ 1024 篇。

可以

關注

我，

我、

評論

我、

我啦。

CDN

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。