JS跨域下載圖片的解決方案

作者：admin 更新：2023-12-05 09:53:58 來源：XIYCMS 人氣：214

一般都是通過創建A標簽，使用download屬性進行下載，但是，如果遇到跨域的圖片，就會直接打開圖片，無法下載，這時，通過下面的方式即可：

方法一：

function  downLoadImage(imgsrc,name){

  var shijc = new Date().getTime();

  imgsrc = imgsrc + "?t=" + shijc;

  var image = new Image();

  // 解決跨域 Canvas 污染問題

  image.setAttribute("crossOrigin", "anonymous");

  image.onload = function() {

    var canvas = document.createElement("canvas");

    canvas.width = image.width;

    canvas.height = image.height;

    var context = canvas.getContext("2d");

    context.drawImage(image, 0, 0, image.width, image.height);

    var url = canvas.toDataURL("image/png",0.7); //得到圖片的base64編碼數據

    var a = document.createElement("a"); // 生成一個a元素

    var event = new MouseEvent("click"); // 創建一個單擊事件

    a.download = name?name+'.png':"photo.png"; // 設置圖片名稱

    a.href = url; // 將生成的URL設置為a.href屬性

    a.dispatchEvent(event); // 觸發a的單擊事件

  };

  image.src = imgsrc;

}

方法二：

function downloadnewimg(src, name) {

    src = src + "?t=" + new Date().getTime();

    fetch(src).then((response) => {

      response.blob().then((myBlob) => {

        const href = URL.createObjectURL(myBlob);

        let a = document.createElement("a");

        a.href = href;

        a.download = name;

        a.click();

      });

    });

  }

-------

僅僅前端這樣還不夠，還需要圖片服務器進行以下設置：

在寶塔的設置》配置文件里，或者偽靜態設置里，加入以下代碼：

add_header Access-Control-Allow-Origin *;

add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";

add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";

評論

發表