前端下载图片的几种方式

1.后端返回文件流，前端利用Blob解析文件流下载

2.下载资源必须是与页面地址同源时，直接利用a标签下载

注意点：下载资源必须与页面地址同源

3.利用fetch或者xhr从图片地址获取二进制数据（blob）进行下载

代码如下：

fetch('https://cdn.beekka.com/blogimg/asset/202012/bg2020122613.jpg')
  .then(res => {
    res.blob().then(res => {
      console.log(res);
      const link = document.createElement('a');
      link.href = window.URL.createObjectURL(res);
      link.download = '22';
      link.click();
      window.URL.revokeObjectURL(link.href);
    })
  })

据mdn描述的a标签释义：利用的就是download属性只在同源 URL 或 blob:、data: 协议起作用