CODEWITHSUNDEEP
javascripthtmlqr-code
user15569150
user15569150

Reputation:

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!

Upvotes: 0

Views: 9867

Answers (3)

codingnewbie
codingnewbie

Reputation: 21

I noticed that the 'qrcodejs' is returning img with blank src on mobile device browsers(Android -> Chrome), whereas it returns an img with valid src (data URI) when you request from mobile as a 'desktop agent'.

You could able to test it by debugging the mobile.

Upvotes: 2

pravoslav
pravoslav

Reputation: 78

You can use Qurious to generate QR code in canvas and then download it. Qurious has also its own padding option (it makes white borders around the qr code so it's possible to scan it after download).

Add this at the <head> part:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>

Html body:

<canvas id="qrcode"></canvas>

Script:

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

Upvotes: 2

Kinglish
Kinglish

Reputation: 23654

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/[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>

Upvotes: 3

Related Questions