vue项目中通过图片url下载图片

前言

之前在开发中遇到过后端返你url地址要求你根据地址去下载图片，因此想着记录下来

第一种方法

a标签有自带的download方法，因此可以用dom生成一个a标签元素将图片的url赋值进去再调用这个a标签元素的click达到下载目的
这是html代码

        <el-button type="text" size="small" @click="handDown(url)"
          >下载图片</el-button
        >

这是js代码

handDown(url) {
  let a = document.createElement("a"); //创建一个a元素
  a.href = this.url;    //a元素图片地址
  a.download = "pic"; //图片名
  a.click();
}

但是这种方法有一个问题就是只能下载同源图片，就是你项目地址的域名和图片地址要相同，否则点击下载当前页会变成图片地址

改良版

直接贴代码

    downloadPicture(imgSrc, name) {
      const image = new Image();
      // 解决跨域 Canvas 污染问题
      image.setAttribute("crossOrigin", "anonymous");
      image.src = imgSrc;
      image.onload = () => {
        const canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        const context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        canvas.toBlob((blob) => {
          const url = URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.download = name || "photo";
          a.href = url;
          a.click();
          a.remove();
          URL.revokeObjectURL(url);
        });
      };
    },
    handDown(url) {
      this.downloadPicture(url, ''pic");
    },

但我在使用时遇到图片跨域不能下载的报错提示，这时叫后端改下代码就好啦！