vue根据图片url进行图片下载

vue实现图片或文件下载功能

这两天遇到一个需求就是实现图片动态下载功能，调用后端接口，返回一个图片路径，然后将图片下载到本地，在此分享一下这个做法。

//点击事件，请求接口
handleCode(row) {
  merStoreCode(row.mer_id)
    .then((res) => {
      this.downloadByBlob(res.data.code, row.mer_name);
    })
    .catch((res) => {
      this.$message.error(res.message);
    });
},
 downloadByBlob(url, name) {
     //第一个参数是图片链接，第二个参数是图片名称
      let image = new Image();
      image.setAttribute('crossOrigin', 'anonymous');
      image.src = url;
      image.onload = () => {
        let canvas = document.createElement('canvas');
        canvas.width = image.width;
        canvas.height = image.height;
        let ctx = canvas.getContext('2d');
        ctx.drawImage(image, 0, 0, image.width, image.height);
        canvas.toBlob((blob) => {
          let url = URL.createObjectURL(blob);
          this.download(url, name);
          // 用完释放URL对象
          URL.revokeObjectURL(url);
        });
      };
    },
    download(href, name) {
      let eleLink = document.createElement('a');
      eleLink.download = name;
      eleLink.href = href;
      eleLink.click();
      eleLink.remove();
    },