夜雨聆风
前端下载图片有很多种方式，取决于你的场景（直接下载、跨域、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 | |
toDataURL | |
