如何通过JS根据图片src下载图片？

一、基础实现：使用 fetch + Blob 下载图片

在现代浏览器中，可以通过 fetch 获取图片资源，将其转换为 Blob，再通过 <a> 标签的 download 属性实现下载。

function downloadImage(src) {
  fetch(src)
    .then(response => response.blob())
    .then(blob => {
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'image.jpg';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
    })
    .catch(err => console.error('下载失败:', err));
}
  

此方法适用于同源图片资源，若图片来自其他域，需处理跨域问题。

二、跨域场景：CORS 与 no-cors 模式对比

当图片资源位于不同域时，需在请求中设置 mode: 'cors' 并确保服务器返回了正确的 CORS 头。

fetch(src, { mode: 'cors' })
  .then(response => {
    if (!response.ok) throw new Error('Network response was not ok');
    return response.blob();
  })
  .then(blob => {
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'image.jpg';
    a.click();
    URL.revokeObjectURL(url);
  });
  

若服务器未启用 CORS，可使用 no-cors 模式请求，但此时无法访问响应内容，无法使用 blob()，只能通过 response.body 流式处理。

三、兼容性处理：download 属性限制与回退方案

download 属性在移动端浏览器支持较好，但在某些浏览器（如 Safari）中存在限制，如仅支持同源链接。

若 download 不可用，可考虑将图片展示在页面中，引导用户手动右键保存。

四、进阶方案：Canvas 绘图与 Base64 转换

若需对图片进行操作（如裁剪、水印），可使用 Canvas 加载图片后导出为 Base64 数据。

function downloadImageWithCanvas(src) {
  const img = new Image();
  img.crossOrigin = 'Anonymous'; // 启用 CORS
  img.onload = () => {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    const dataURL = canvas.toDataURL('image/png');
    const a = document.createElement('a');
    a.href = dataURL;
    a.download = 'image.png';
    a.click();
  };
  img.src = src;
}
  

注意：Canvas 中加载图片需设置 crossOrigin 属性以避免跨域污染。

五、流程图：JS 下载图片的整体流程

六、性能优化与注意事项

• 大图片下载时建议分块读取或使用流式处理。
• 避免频繁创建和销毁 Blob URL，及时调用 revokeObjectURL。
• 注意内存泄漏，尤其在大量图片下载时。
• 服务端应设置合适的 Content-Disposition 和 Access-Control-Allow-Origin。
• 移动端应考虑网络状况，可添加加载状态提示。
• 使用 AbortController 控制下载中断逻辑。