下载 qrcode.js 生成的二维码

Question

我在网上搜索了无数次，试图找到解决这个问题的方法，但每次都是空手而归。我一直在使用 qrcode.js 为网站生成 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。

谢谢！

Answer 1

图片是通过插件生成的，渲染需要一定时间，所以该方法需要setTimeout。之后，我们抓取图像的 src 并将其应用到下载 link（其中具有属性 download 的 link）

注意这在代码段沙箱中不起作用，但它已经在普通网页上进行了测试并且效果很好。

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://whosebug.com" style="width:80%" /><br />
<div id="qrcode"></div>

<a id='qrdl' hidden>Download</a>

Answer 2

您可以使用Qurious生成canvas中的二维码，然后下载。 Qurious 也有自己的填充选项（它在 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")

下载 qrcode.js 生成的二维码

Downloading a qrcode.js-generated QR code

html

javascript

qr-code