前端下载图片

前端下载图片有很多种方式，取决于你的场景（直接下载、跨域、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`); }}

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

🚀 总结（选型建议）