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");