我在网上搜索了无数次试图找到解决这个问题的方法，但每次都是空手而归。我一直在使用 qrcode.js 为网站生成二维码，但我还没有弄清楚如何在生成图像后下载图像。我用来生成二维码的代码如下所示：
var myQR = new QRCode(document.getElementById("qrcode"), {
text: "Made with QR Generator",
width: 128,
height: 128,
colorDark : qrdarkcolor,
colorLight : qrlightcolor,
correctLevel : QRCode.CorrectLevel.H
});
myQR.makeCode(qrdata);
我正在尝试找到一种方法来下载 div 中的二维码，或者找到源并创建一个用户可以单击以下载图像的按钮。如果这是一个常见问题，我很抱歉，但我搜索了许多其他与此类似的问题，但没有找到明确的答案。如果可能的话，我希望这个网站只包含 HTML、CSS 和 Javascript。
谢谢！
图像是通过插件生成的，渲染需要一点时间，所以该方法需要用setTimeout来完成。之后，我们抓取图像的
srcdownload注意这在代码片段沙箱中不起作用，但它已经在普通网页上进行了测试并且效果很好。
const makeQR = (url, filename) => {
var qrcode = new QRCode("qrcode", {
text: "http://jindo.dev.naver.com/collie",
width: 128,
height: 128,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
qrcode.makeCode(url);
setTimeout(() => {
let qelem = document.querySelector('#qrcode img')
let dlink = document.querySelector('#qrdl')
let qr = qelem.getAttribute('src');
dlink.setAttribute('href', qr);
dlink.setAttribute('download', 'filename');
dlink.removeAttribute('hidden');
}, 500);
}
makeQR(document.querySelector('#text').value, 'qr-code.png')#qrcode {
width: 160px;
height: 160px;
margin-top: 15px;
}<script src="https://cdn.jsdelivr.net/npm/[email protected]/qrcode.min.js"></script>
<input id="text" type="text" value="https://stackoverflow.com" style="width:80%" /><br />
<div id="qrcode"></div>
<a id='qrdl' hidden>Download</a>您可以使用Qurious在canvas中生成二维码然后下载。 Qurious 还有自己的填充选项（它在二维码周围添加白色边框，以便下载后可以扫描）。
在
<head> <script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
HTML 正文：
<canvas id="qrcode"></canvas>
脚本：
const makeQR = (your_data) => {
let qrcodeContainer = document.getElementById("qrcode");
qrcodeContainer.innerHTML = "";
new QRious({
element: qrcodeContainer,
value: your_data,
size: 600,
padding:50,
}); // generate QR code in canvas
downloadQR(); // function to download the image
}
function downloadQR() {
var link = document.createElement('a');
link.download = 'filename.png';
link.href = document.getElementById('qrcode').toDataURL()
link.click();
}
makeQR("Your value")
我注意到“qrcodejs”在移动设备浏览器（Android -> Chrome）上返回带有空白src的img，而当您作为“桌面代理”从移动设备请求时，它返回带有有效src（数据URI）的img。
您可以通过调试手机来测试它。
@用户15569150 安卓的问题你解决了吗？我面临着同样的问题。就我而言，单击下载按钮会下载整个网页。 :-(