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 = ("a"); //创建一个a元素
   = ;    //a元素图片地址
   = "pic"; //图片名
  ();
}

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

改良版

直接贴代码

    downloadPicture(imgSrc, name) {
      const image = new Image();
      // 解决跨域 Canvas 污染问题
      ("crossOrigin", "anonymous");
       = imgSrc;
       = () => {
        const canvas = ("canvas");
         = ;
         = ;
        const context = ("2d");
        (image, 0, 0, , );
        ((blob) => {
          const url = (blob);
          const a = ("a");
           = name || "photo";
           = url;
          ();
          ();
          (url);
        });
      };
    },
    handDown(url) {
      (url, ''pic");
    },

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