利用 a 标签 实现 下载图片（不是打开）的正确姿势

1. 场景再现

• 当 a 标签中添加了 download 属性，想要实现下载图片时：
• 点击 a 链接，没有进行下载，而是在 当前页面 打开了图片

---

2. 原因

• <a> 有 download 属性，可以实现下载 同源文件（ ip 和 端口 相同）
• 当图片 不同源 时，点击下载，会在当前窗口直接打开图片，而不是进入下载状态

---

3. 解决方案（两种）

3.1 使用 target 属性，打开新页面进行下载

• 这样可以维持当前页面状态，用户需要在新页面中保存图片

---

3.2 写一个点击事件，通过 canvas 方式 保存图片

<script>
  /**
   * 下载图片
   * @param {string} imgsrc 图片地址
   */
  downloadIamge(imgsrc) {
    // 新建图片对象
    let image = new Image();
    // 解决跨域 Canvas 污染问题
    image.setAttribute("crossOrigin", "anonymous");
    // 图片加载
    image.onload = function() {
      // 新建 canvas标签
      let canvas = document.createElement("canvas");
      // 设置 canvas宽高
      canvas.width = image.width;
      canvas.height = image.height;
      // 添加 canvas画笔
      let context = canvas.getContext("2d");
      // 绘制图片
      context.drawImage(image, 0, 0, image.width, image.height);
      // 得到图片的 base64 编码
      let url = canvas.toDataURL("image/png");
      // 新建 a标签
      let a = document.createElement("a");
      // 新建点击事件
      let event = new MouseEvent("click");
      // 将图片的 base64 编码，设置为 a标签的地址
      a.href = url;
      // 触发点击事件
      a.dispatchEvent(event);
    };
    // 将图片地址 设置为 传入的参数 imgsrc
    image.src = imgsrc;
  };

  /**
   * 下载方法
   * @param {string} filepath 文件地址
   */
  downloads(filepath) {
    // isImageFile()：自定义函数，根据*后缀*判断是否是图片
    if (isImageFile(filepath)){
      this.downloadIamge(filepath)
    } else {
      this.downloadFile(filepath)
    }
  };
</script>