Create qrCode with output base64 from javascript

Question

I want to create qr-code with output base64 string from javascript.

I found http://davidshimjs.github.io/qrcodejs/ for generate qr-code. That I want is get base64 string from this awesome tools.

Solution 1

you can get the Base64 directly from the generated variable, i.e.:

/*generate QRCode*/
var qrcodjs = new QRCode("qrcode", {
    text: orderData.reference,
    width: 128,
    height: 128,
    colorDark: "#000000",
    colorLight: "#ffffff",
    correctLevel: QRCode.CorrectLevel.H
});

/*get base64*/
var imgBase64Data = qrcodjs._el.childNodes[4].currentSrc;

This will work unfortunately only on google chrome or Firefox... for IE or Safari you will have to use:

                var imgBase64 = qrcodjs._oDrawing._elImage.currentSrc;
                if (typeof imgBase64 === "undefined")
                    imgBase64 = qrcodjs._oDrawing._elImage.href;
                if (typeof imgBase64 === "undefined")
                    imgBase64 = qrcodjs._oDrawing._elImage.src;

Solution 2

May be you can get this code d-project.googlecode.com

And replace last strings

from

    var img = '';
    img += '<img';
    img += '\u0020src="';
    img += 'data:image/gif;base64,';
    img += base64;
    img += '"';
    img += '\u0020width="';
    img += width;
    img += '"';
    img += '\u0020height="';
    img += height;
    img += '"';
    if (alt) {
        img += '\u0020alt="';
        img += alt;
        img += '"';
    }
    img += '/>';

to

    var img = 'data:image/gif;base64,' + base64;

Getting a base64

    var qr = qrcode(4, 'M');
    qr.addData('This is base64 string');
    qr.make();
    concole.log(qr.createImgTag());

Solution 3

just use below given any one of the qr js library to get base64

1.qrcodejs

2.easyqrcodejs

var qrcodjs = new QRCode("qrcode", {
    text: orderData.reference,
    width: 128,
    height: 128,
    colorDark: "#000000",
    colorLight: "#ffffff",
    correctLevel: QRCode.CorrectLevel.H
});

base64

qrcode._oDrawing._elCanvas.toDataURL("image/png")