【JavaScript】---- 浏览器图片下载

1. 浏览器下载图片的方式

1. 文件流格式下载图片；
2. base64 格式的图片下载；
3. 链接格式下载。

2. 文件流格式

1. 使用 a 标签下载文件流格式的图片；
2. 使用 Blob 对象转换传入的文件流；
3. 使用 FileReader 对象读取转换的文件流；
4. 读取的 onload 方法中，创建 a 标签；
5. 设置下载图片的名称；
6. 设置 a 标签的地址；
7. 将 a 标签放入 body，并且触发点击事件；
8. 最后移除创建的 a 标签。

function downloadFile(file, fileName){
  const blob = new Blob([file]);
  const fileReader = new FileReader();
  fileReader.readAsDataURL(blob);
  fileReader.onload = (e) => {
    const a = document.createElement("a");
    a.download = fileName || '测试.png';
    a.href = e.target?.result;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  };
}

3. base64 格式或者链接格式

1. 使用 canvas 配合 a 标签下载图片；
2. 创建图片对象；
3. 解决跨域 Canvas 污染问题；
4. 将资源链接赋值；
5. 触发 image.onload 事件；
6. 创建 canvas 标签；
7. 设置 canvas 的宽高；
8. 绘制图片；
9. 得到图片的base64编码数据；
10. 创建 a 标签；
11. 创建一个单击事件;
12. 设置图片名称；
13. 将生成的 URL 设置为 a.href 属性；
14. 触发 a 的单击事件。

function downloadImage(imgsrc, name, type = 'png'){
  let image = new Image();
  image.setAttribute("crossOrigin", "anonymous");
  image.onload = function () {
    let canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    let context = canvas.getContext("2d");
    context?.drawImage(image, 0, 0, image.width, image.height);
    let url = canvas.toDataURL(`image/${type}`); 
    let a = document.createElement("a"); 
    let event = new MouseEvent("click"); 
    a.download = name || "测试"; 
    a.href = url; 
    a.dispatchEvent(event); 
  }
  image.src = imgsrc
}

4. 将文件流传 base64 再使用 downloadImage 下载

1. 使用 Blob 对象转换文件流；
2. 使用 FileReader 阅读 blob 对象；
3. 在 fileReader.onload 中获取 base64 字符串；
4. 使用 downloadImage 下载 base64 图片。

function downloadFileUrl(file){
  const blob = new Blob([file]);
  const fileReader = new FileReader();
  fileReader.readAsDataURL(blob);
  fileReader.onload = (e) => {
    const url = e.target?.result;
    downloadImage(`data:image/png;base64,${url}`, '测试')
  };
}

5. 总结

1. 实现下载图片的方法比较多，找到适合的最快方式完成功能！！！