前端下载图片

前端下载图片有很多种方式，取决于你的场景（直接下载、跨域、base64、canvas等）。我给你整理几种常见方案👇

✅ 1. 直接用 `<a download>`（最简单）

适用于：同源图片或已允许跨域的图片

function downloadImage(url, filename = 'image.jpg') {  const a = document.createElement('a');  a.href = url;  a.download = filename;  a.click();}

👉 注意：

•如果是跨域图片，服务器必须允许（Access-Control-Allow-Origin）•否则会变成“打开图片”而不是下载

✅ 2. fetch + blob（推荐通用方案）

适用于：跨域下载（前提是服务器允许 CORS）

async function downloadImage(url, filename = 'image.jpg') {  const res = await fetch(url);  const blob = await res.blob();  const blobUrl = URL.createObjectURL(blob);  const a = document.createElement('a');  a.href = blobUrl;  a.download = filename;  a.click();  URL.revokeObjectURL(blobUrl);}

👉 优点：

•可控性强•可以做 loading / 进度 / 错误处理

✅ 3. base64 下载

适用于：你已经拿到 base64 数据

function downloadBase64(base64, filename = 'image.png') {  const a = document.createElement('a');  a.href = base64;  a.download = filename;  a.click();}

✅ 4. canvas 转图片下载（常用于截图/处理后下载）

function downloadCanvas(canvas, filename = 'image.png') {  const url = canvas.toDataURL('image/png');  const a = document.createElement('a');  a.href = url;  a.download = filename;  a.click();}

👉 注意：

•canvas 如果画了跨域图片且未设置 crossOrigin，会报错（tainted canvas）

✅ 5. 解决跨域图片无法下载（关键点🔥）

如果你遇到这种问题：

图片可以显示，但下载失败 / 变成打开新窗口

解决方案：

✔️ 方法1：后端代理（最稳）

让后端去请求图片，再返回给前端

前端 -> 你的服务器 -> 图片服务器

✔️ 方法2：设置 crossOrigin

const img = new Image();img.crossOrigin = 'anonymous';img.src = url;

⚠️ 前提：图片服务器必须支持 CORS

✅ 6. 批量下载（进阶）

async function batchDownload(urls) {  for (let i = 0; i < urls.length; i++) {    await downloadImage(urls[i], `image_${i}.jpg`);  }}

👉 注意浏览器限制（同时下载过多会被拦截）

🚀 总结（选型建议）

场景	推荐方案
普通图片	`<a download>`
跨域图片	`fetch + blob`
base64	直接下载
canvas生成	`toDataURL`
强制稳定	后端代理

✅ 1. 直接用 <a download>（最简单）