本文介绍如何通过纯前端 javascript（无需后端）一键下载指定 url 的 qr 码图片，利用 `fetch` + `blob` + 动态 `quickchart.io）直接下载为本地 png 文件。由于该 qr 图片由 url 直接返回（http 响应体为 image/png），我们完全可以在浏览器端完成获取、构造下载链接并触发保存——无需 php 或任何服务端介入。
✅ 推荐方案：纯 JavaScript 前端下载（推荐）
以下是一段简洁、健壮、可复用的代码，适用于现代浏览器（Chrome 64+、Firefox 60+、Edge 79+、Safari 15.4+）：
<button id="downloadQrBtn">? 下载 QR 码</button>
<script>
document.getElementById('downloadQrBtn').addEventListener('click', async () => {
const qrUrl = 'https://www.php.cn/link/4fd76758ca20a054063d174c3cd7f394/qr?text=http://tapo.app&dark=000&light=fff&ecLevel=H&margin=1&size=500¢erImageSizeRatio=0.4¢erImageUrl=https://app.tapo.app/Logo-Big.png';
try {
const response = await fetch(qrUrl);
if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);
const blob = await response.blob();
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'tapo-qr-code.png'; // 自定义文件名（扩展名建议与实际类型一致）
document.body.appendChild(a); // 部分浏览器要求元素在 DOM 中
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url); // 及时释放内存引用
} catch (err) {
console.error('下载失败：', err);
alert('无法下载二维码，请检查网络或稍后重试。');
}
});
</script>? 注意 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 脚本代理下载（需服务器支持）：
<?php
// download-qr.php
$qrUrl = $_GET['url'] ?? '';
if (!$qrUrl || !filter_var($qrUrl, FILTER_VALIDATE_URL)) {
http_response_code(400);
exit('Invalid URL');
}
$ext = pathinfo(parse_url($qrUrl, PHP_URL_PATH), PATHINFO_EXTENSION) ?: 'png';
header('Content-Type: image/' . $ext);
header('Content-Disposition: attachment; filename="qr-code.' . $ext . '"');
readfile($qrUrl);
?>前端调用：
a.href = 'download-qr.php?url=' + encodeURIComponent(qrUrl);
但除非必要，优先推荐纯前端方案——更轻量、更低延迟、无服务端依赖。
立即学习“Java免费学习笔记（深入）”；
综上，只需几行 JavaScript 即可优雅实现 QR 图片一键下载。保持 URL 正确、处理异常、及时释放资源，即可在绝大多数生产环境中稳定运行。
