浏览器无法绕过用户交互直接保存图片，同源图片用最简，跨域需cors支持，ios safari只能window.open后手动保存。
浏览器原生不支持直接保存图片到本地
现代浏览器出于安全限制，JavaScript 无法绕过用户交互直接写入文件系统。所谓“一键保存”，本质是触发浏览器下载行为，由用户确认保存路径——这不是前端能绕过的权限问题，而是设计使然。
可行路径只有一条：构造一个带 download 属性的 @#@#@#@#@#@#@#@#@#@0 即可。点击后浏览器自动下载，不跳转、不弹新页。
注意几个细节：
-
download属性仅对同源 URL 生效；设成download="abc.png"可自定义文件名，否则默认用 URL 中的文件名 - 不要用
javascript:void(0)或#作href，那样download会失效 - 部分旧版 Safari（download，需 fallback 到新窗口打开图片（用户右键另存）
跨域图片只能走 fetch + Blob + URL.createObjectURL
当图片来自外部域名且服务端已配置 CORS（检查响应头含 Access-Control-Allow-Origin），可用 fetch 拉取二进制数据，生成本地 blob URL 触发下载：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
const img = document.querySelector('img');
img.addEventListener('click', async () => {
try {
const res = await fetch(img.src);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const blob = await res.blob();
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'image.jpg'; // 建议从 img.src 解析真实文件名
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url); // 立即释放，避免内存泄漏
} catch (e) {
console.warn('保存失败：', e.message);
// fallback：window.open(img.src)
}
});
常见坑点：
- 没配 CORS →
fetch报错TypeError: Failed to fetch，且无法捕获具体原因 - 忘记
URL.revokeObjectURL→ 多次点击后内存持续增长 - 用
img.src直接当文件名 → 可能含 query 参数（如photo.jpg?v=2），应正则提取.jpg前的部分
移动端 Safari 的特殊限制
iOS/iPadOS 的 Safari 对 download 属性完全忽略，createObjectURL 生成的链接点击后也常无反应。目前唯一稳定方案是：window.open(img.src) 打开图片，在新页中长按图片选择“存储图像”。无法绕过，也不建议用 canvas 重绘再导出——iOS 上 toBlob 可能返回空数据，且压缩画质不可控。
所以实际部署时，得做 UA 检测：
if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
window.open(img.src);
} else {
// 执行上述 fetch/Blob 下载逻辑
}
真正麻烦的不是代码，而是用户预期管理：页面上写的“保存图片”按钮，在 iOS 上实际只是“打开图片”，这点必须在 UI 上弱提示或文档里说明清楚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
