Search code examples
javascripthtmlqr-code

Downloading a qrcode.js-generated QR code

I've searched the web countless times trying to find a way to solve this but I've come up empty-handed every time. I have been using qrcode.js to generate QR codes for a website, but I haven't figured out how to download the image once it's been generated. The code I use to generate the QR code looks like this:

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);

I am trying to find a way to either download the QR code within the div or find the source and create a button that users can click on to download the image. I apologize if this is a commonly asked question, but I've searched many other questions that are similar to this and haven't found a clear answer. I would prefer to keep this site with only HTML, CSS, and Javascript if possible.

Thanks!

Solution

  • The image is generated through the plugin and takes a moment to render, so the method needs to be done with setTimeout. After that, we grab the src of the image and apply it to a download link (a link that has the attribute download in it)

    Note this won't work in the snippet sandbox, but it's been tested on a normal web page and works great.

    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>