如何利用JS使用鏈接跨域下載圖片

前言

圖片是最常見的靜態資源文件，可以從本地、外鏈獲取圖片，或者使用base64碼展示。而canvas的toDataUrl() API可以將圖片轉base64碼，然後模擬點擊事件即可下載圖片。

外鏈下載

在本地或者網站下載外鏈url圖片時涉及到跨域，跨域會暴露自己的隱私，瀏覽器對跨域請求進行了限制，故需要設置crossOrigin為anonymous來允許跨域，瀏覽器會為這張圖片的請求頭附帶Origin信息，告訴靜態資源服務器，請在響應頭中附帶Access-Control-Allow-Methods、Access-Control-Allow-Origin，以便瀏覽器放行。

代碼示例如下

eventEmitter.js

backend.js

注意

若有跨域的錯誤提示出現，則需後臺服務器進行跨域設置。

小編這裡整理了學習web前端的學習資料，相信有很多想要學習web前端的小夥伴，那麼趕緊行動起來吧，關注小編，私信【學習】，即可免費獲得哦！