如何使用 JavaScript 实现点击按钮下载远程 QR 图片
本文介绍如何通过纯前端 javascript（无需后端）一键下载指定 url 的 qr 码图片，利用 `fetch` + `blob` + 动态 `quickchart.io）直接下载为本地 png 文件。由于该 qr 图片由 url 直接返回（http 响应体为 image/png），我们完全可以在浏览器端完成获取、构造下载链接并触发保存——无需 php 或任何服务端介入。
✅ 推荐方案：纯 JavaScript 前端下载（推荐）
以下是一段简洁、健壮、可复用的代码，适用于现代浏览器（Chrome 64+、Firefox 60+、Edge 79+、Safari 15.4+）：
? 注意 URL 编码修正：原始问题中 URL 含有错误的 ¢erImageSizeRatio（应为 centerImageSizeRatio）和 ¢erImageUrl（应为 centerImageUrl），已在此示例中修复。务必确保 URL 参数正确且已正确编码（如空格、& 等需 encodeURIComponent，但本例中参数值均安全，可直接使用）。
⚠️ 重要注意事项
- CORS 限制：fetch 下载跨域图片需目标服务器返回 Access-Control-Allow-Origin: *（或明确允许你的域名）。QuickChart.io 默认支持 CORS，因此可直接调用；若遇到 Blocked by CORS policy 错误，请确认服务端配置。
- 不支持 IE：fetch 和 Blob 在 IE 中不可用，如需兼容 IE，需引入 fetch polyfill 并改用 XMLHttpRequest + msSaveOrOpenBlob（仅限 IE10+）。
- 文件名限制：a.download 属性在部分 Safari 版本中可能被忽略，此时浏览器会默认使用 URL 中的文件名（若无，则用 unknown）。建议确保 URL 包含语义化路径（如加 ?name=xxx.png 无效，仍需靠 download 属性）。
- 内存管理：每次调用 URL.createObjectURL() 后必须配对调用 URL.revokeObjectURL()，否则可能造成内存泄漏。
✅ 替代方案（服务端中转，适用于 CORS 不友好场景）
若目标图片服务不支持 CORS，可借助轻量 PHP 脚本代理下载（需服务器支持）：
前端调用：
a.href = 'download-qr.php?url=' + encodeURIComponent(qrUrl);
但除非必要，优先推荐纯前端方案——更轻量、更低延迟、无服务端依赖。
综上，只需几行 JavaScript 即可优雅实现 QR 图片一键下载。保持 URL 正确、处理异常、及时释放资源，即可在绝大多数生产环境中稳定运行。
