下载qrcode.js生成的QR代码
我已经在网上搜索了无数次，试图找到解决这个问题的方法，但是每次我都会空手而归。我一直在使用qrcode.js为一个网站生成QR代码，但我还没有弄清楚如何下载生成的图像。用于生成QR代码的代码如下所示：
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中的QR代码，要么找到源代码并创建一个用户可以单击的按钮来下载图像。如果这是一个常见的问题，我很抱歉，但我已经搜索了许多类似于此的问题，但没有找到明确的答案。我宁愿保持这个网站只有HTML，CSS和Javascript，如果可能的话。
谢谢!
回答 3
Stack Overflow用户
发布于 2021-06-22 04:39:09
图像是通过插件生成的，需要花一些时间来渲染，所以这个方法需要用setTimeout来完成。然后，我们获取图像的src并将其应用到下载链接(其中包含属性download的链接)。
Note --这在代码片段沙箱中不起作用，但它已经在普通网页上进行了测试，并且工作得很好。
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/davidshimjs-qrcodejs@0.0.2/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>
Stack Overflow用户
发布于 2021-10-14 19:47:57
您可以使用高利贷在画布中生成QR代码，然后下载它。它也有自己的填充选项(它在qr代码周围设置白色边框，所以下载后可以扫描它)。
在<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")Stack Overflow用户
发布于 2022-08-22 12:22:06
我注意到“qrcodejs”在移动设备浏览器(Android -> Chrome)上返回带有空白src的img，而当您以“桌面代理”的身份从移动设备请求时返回带有有效src (数据URI)的img。
您可以通过调试手机来测试它。
https://stackoverflow.com/questions/68077398
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号