Is it possible to get the base64 string of the QR code?

[davidshimjs]

Is it possible to get the base64 string of the QR code?

[rodolfojnn]

Another simple workaround to get the base64 is:

const qrcode = new QRCode(document.createElement('div'), {
	text: "http://jindo.dev.naver.com/collie",
	width: 128,
	height: 128,
	colorDark : "#000000",
	colorLight : "#ffffff",
	correctLevel : QRCode.CorrectLevel.H
});
qrcode._oDrawing._elImage.onload = ev => { 
    console.log(ev.target.src);
}

[rodrigomtz]

I am guessing that one solution might be jquerying it to get the src of the image.. but there should be a more elegant way to solve this no?

[glen1166]

As [rodrigomtz] said, i got the base64 string of QR code using JQuery:

qrCode.makeCode(text);
$("img").load(function () {
//get the src attribute of image here...
});

[yanpeipan]

the same issue, this work is in plan?

[nmcv]

There's no callback for makeCode at all?

[kdavis45]

makeCode() already creates an img with a base64 src and places it inside the

you provide it. So the best way I can see to get at that base64 string is to simply add one line of code into qrcode.js and add an id tag you can use to retrieve the b64 data. Somewhere inside var Drawing. I gave mine an id tag of "qrjs".

var Drawing = function (el, htOption) {
this._bIsPainted = false;
this._android = _getAndroid();
this._htOption = htOption;
this._elCanvas = document.createElement("canvas");
this._elCanvas.width = htOption.width;
this._elCanvas.height = htOption.height;
el.appendChild(this._elCanvas);
this._el = el;
this._oContext = this._elCanvas.getContext("2d");
this._bIsPainted = false;
this._elImage = document.createElement("img");
this._elImage.alt = "Scan me!";
this._elImage.id = "qrjs";
this._elImage.style.display = "none";
this._el.appendChild(this._elImage);
this._bSupportDataURI = null;
};

Then you simply wait for the drawing to load using .onload() and retrieve the base64 string from the source and use however you like.

Mine went something like this:

  var aeqr; // this will be used to point directly at the base 64 img part of the output
  // Instantiate a new QRCode and place it in the "qrcode" div element
  var qrurl = new QRCode(document.getElementById("qrcode"), {
            width : 140,
            height : 140
        });
    var qrdest = "https://www.airbridgelabs.com/v/"+vid+"/app.html?tm=10%26vid=" + vid;
    aeqr = document.getElementById("qrjs");
  // create the listener to fire when qrurl is finished (and aeqr has loaded with the img
  aeqr.onload = function() {
     // do something with the base64 QR image AFTER it finishes loading
     ctxq.drawImage(aeqr, 0, 0, 120, 120);
     var qrdataURL = qrcanvas.toDataURL();
  }

 qrurl.makeCode(qrdest); // start building the QR image using qrdest text AFTER you create the onload() element for it

As you can see this is great if you only need to build one QR image (or one at a time) since the id is hard coded above. If you need to get at multiple B64 QR images simultaneously, then this will require a bit more code. You could, for example, pass yet another parameter in along with width and height and provide a unique id for each img.

I know it is several months past the previous comment but hope this helps someone.

[Abobos]

Thanks.. This helps

[ibalaji777]

const qrcode = new QRCode(document.createElement('div'), {
text: "http://jindo.dev.naver.com/collie",
width: 128,
height: 128,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
var base64=qrcode._oDrawing._elImage.currentSrc