本文介绍如何使用纯 javascript（无需后端）直接从 url 下载动态生成的 qr 码图片，适用于 quickchart.io 等在线二维码服务，核心是利用 `fetch` + `blob` + 模拟点击 `quickchart.io 动态生成的 png 图片）提供给用户一键下载。由于该 url 直接返回图像二进制数据（content-type: image/png），我们完全可以通过浏览器原生 api 在前端完成下载，无需 php 或任何服务端中转——既轻量又安全。
✅ 推荐实现（现代浏览器兼容）
以下是一段简洁、健壮的 JavaScript 实现，支持错误处理与资源清理：
async function downloadQRImage() {
const url = '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(url);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const blob = await response.blob();
const blobUrl = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = blobUrl;
a.download = 'tapo-qr-code.png'; // 自定义文件名（扩展名建议与实际类型一致）
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(blobUrl); // 及时释放内存引用
} catch (err) {
console.error('下载失败：', err);
alert('二维码下载失败，请检查网络或重试。');
}
}? HTML 触发示例：
<button onclick="downloadQRImage()">? 下载 QR 码</button>
⚠️ 注意事项
- CORS 限制：QuickChart.io 默认允许跨域请求（响应头含 Access-Control-Allow-Origin: *），因此可直连。若换用其他不支持 CORS 的图片服务，则需后端代理（PHP/Node.js 等）中转。
- URL 编码修正：原始问题中的 URL 含 ¢erImageSizeRatio（应为 centerImageSizeRatio）等乱码参数，已手动修正为正确拼写（& 而非 &，且无 ¢ 字符）。请确保传入 fetch() 的 URL 是合法、可访问的。
- 兼容性：fetch 和 Blob 在现代浏览器（Chrome 42+, Firefox 39+, Edge 14+, Safari 10.1+）中均支持；如需支持 IE，需引入 fetch polyfill 并改用 XMLHttpRequest。
- 文件名建议：a.download 值应包含 .png 扩展名，避免部分浏览器默认保存为 unknown 类型。
✅ 总结
该方案零依赖、零服务端、语义清晰，是前端下载远程图片的最佳实践之一。只需一行 fetch() 获取资源，再借助 Blob 和 URL.createObjectURL() 创建临时地址，即可触发浏览器原生下载行为——简洁、高效、可复用。
