JS圖片下載：從本地、生成、流、顯示到頁面、token可下載

一、JS圖片下載本地

通過調用瀏覽器的下載功能，可以將圖片下載到本地。

function downloadImage(url) {
  let filename = url.substring(url.lastIndexOf('/') + 1).split("?")[0];
  let a = document.createElement('a');
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

在需要下載圖片的地方調用該函數即可：

downloadImage("http://example.com/images/example.jpg");

二、JS生成圖片下載到本地

如果需要將通過JS生成的圖片下載到本地，可以使用canvas將圖片轉換成base64編碼格式，然後通過瀏覽器的下載功能下載。

let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
let image = new Image();
image.onload = function() {
  canvas.width = image.width;
  canvas.height = image.height;
  ctx.drawImage(image, 0, 0);
  let base64 = canvas.toDataURL();
  let a = document.createElement("a");
  a.href = base64;
  a.download = "example.png";
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}
image.src = "example.jpg";

三、JS圖片下載成file

通過AJAX請求後端接口獲取圖片二進制流，然後將二進制流轉換成file對象。

function downloadFile(url) {
  let xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.responseType = "blob";
  xhr.onload = function() {
    if (this.status == 200) {
      let blob = this.response;
      let filename = url.substring(url.lastIndexOf('/') + 1).split("?")[0];
      let a = document.createElement("a");
      a.href = window.URL.createObjectURL(blob);
      a.download = filename;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    }
  }
  xhr.send();
}

調用該函數即可下載：

downloadFile("http://example.com/images/example.png");

四、JS圖片下載直接顯示而不下載

有時候需要將圖片顯示在頁面上，而不是下載到本地。直接將圖片的url作為標籤的src屬性即可。

<img src="http://example.com/images/example.jpg">

五、JS圖片下載不在線看

對於不在線查看的圖片，可以使用canvas將圖片繪製成base64編碼格式，然後顯示在頁面上。但是，需要注意的是對於大圖片會消耗大量的內存，可能會導致頁面卡頓。

let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
let image = new Image();
image.onload = function() {
  canvas.width = image.width;
  canvas.height = image.height;
  ctx.drawImage(image, 0, 0);
  let base64 = canvas.toDataURL();
  let img = document.createElement("img");
  img.src = base64;
  document.body.appendChild(img);
}
image.src = "example.jpg";

六、JS圖片下載完顯示到頁面

有時候需要將下載後的圖片顯示在頁面上。這時候可以將圖片的url作為標籤的src屬性，或者使用canvas將圖片繪製到頁面上。

方法一：

let img = new Image();
img.onload = function() {
  document.body.appendChild(img);
}
img.src = "example.jpg";

方法二：

let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
let image = new Image();
image.onload = function() {
  canvas.width = image.width;
  canvas.height = image.height;
  ctx.drawImage(image, 0, 0);
  let img = new Image();
  img.src = canvas.toDataURL();
  document.body.appendChild(img);
}
image.src = "example.jpg";

七、JS圖片下載有token的可下載

有些情況下需要使用token進行權限驗證後才能下載圖片。可以使用AJAX請求後端接口獲取圖片二進制流，然後將二進制流轉換成file對象。

function downloadFileWithToken(url, token) {
  let xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.setRequestHeader("Authorization", "Bearer " + token);
  xhr.responseType = "blob";
  xhr.onload = function() {
    if (this.status == 200) {
      let blob = this.response;
      let filename = url.substring(url.lastIndexOf('/') + 1).split("?")[0];
      let a = document.createElement("a");
      a.href = window.URL.createObjectURL(blob);
      a.download = filename;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    }
  }
  xhr.send();
}

調用該函數即可下載：

downloadFileWithToken("http://example.com/images/example.png", "xxx-xxx-xxx-xxx");

八、用JS下載圖片流

可以通過AJAX請求後端接口獲取圖片二進制流，然後將二進制流轉換成base64編碼格式，最後將base64編碼格式的字符串轉為Blob對象，實現下載圖片流。

function downloadImageStream(url) {
  let xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.responseType = "blob";
  xhr.onload = function() {
    if (this.status == 200) {
      let blob = this.response;
      let reader = new FileReader();
      reader.readAsDataURL(blob);
      reader.onloadend = function() {
        let base64data = reader.result;
        let array = base64data.split(",");
        let mime = array[0].match(/:(.*?);/)[1];
        let bstr = atob(array[1]);
        let n = bstr.length;
        let u8arr = new Uint8Array(n);
        while(n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        let blobObj = new Blob([u8arr], {type: mime});
        let downloadUrl = window.URL.createObjectURL(blobObj);
        let a = document.createElement("a");
        a.style.display = "none";
        a.href = downloadUrl;
        a.download = url.substring(url.lastIndexOf('/') + 1).split("?")[0];
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(downloadUrl);
        document.body.removeChild(a);
      }
    }
  }
  xhr.send();
}

調用該函數即可下載：

downloadImageStream("http://example.com/images/example.jpg");