JavaScript Requires Chilkat v11.7.0+

Get the Modules of a QR Code (Bit Matrix)

See more QR Code Examples

Demonstrates getting the QR code itself, as a grid of dark and light modules, to draw with something other than the built-in PNG and SVG output: on a canvas, in a PDF, on a display, or with a label printer language. With output.includeModuleData the response has symbols[0].moduleData, a bit matrix with one bit per module, each row starting on a new byte, most significant bit first, 1 for dark. The quiet zone is not part of the matrix. The example prints the symbol using two characters per module. JavaScript

var success = false;

//  This example requires the Chilkat API to have been previously unlocked.
//  See Global Unlock Sample for sample code.

var json = new CkJsonObject();
json.UpdateString("payload.text","CHILKAT");
json.UpdateBool("output.includeModuleData",true);

var fmt = new CkFormats();
var jsonOut = new CkJsonObject();
success = fmt.QrCode("generate",json,jsonOut);
if (success == false) {
    console.log(fmt.LastErrorText);
    return;
}

var width = jsonOut.IntOf("symbols[0].moduleData.width");
var height = jsonOut.IntOf("symbols[0].moduleData.height");
var rowBytes = jsonOut.IntOf("symbols[0].moduleData.rowBytes");
console.log("kind: " + jsonOut.StringOf("symbols[0].moduleData.kind"));
console.log("modules: " + width + " x " + height + ", " + rowBytes + " bytes per row");

//  The matrix is height rows of rowBytes bytes.
var bd = new CkBinData();
success = bd.AppendEncoded(jsonOut.StringOf("symbols[0].moduleData.bytesBase64"),"base64");
if (success == false) {
    console.log(bd.LastErrorText);
    return;
}

var sbRow = new CkStringBuilder();
var row;
var col;
var b;
var mask = 128;
for (row = 0; row <= height - 1; row++) {
    sbRow.Clear();
    for (col = 0; col <= width - 1; col++) {
        //  The module at (col,row) is a bit of the byte at (row * rowBytes) + (col / 8).
        //  The leftmost module of each byte is its most significant bit.
        if ((col % 8) == 0) {
            mask = 128;
        }

        b = bd.GetByte((row * rowBytes)+(col / 8));
        if (((b / mask) % 2) == 1) {
            sbRow.Append("##");
        }
        else {
            sbRow.Append("  ");
        }

        mask = mask / 2;
    }

    console.log(sbRow.GetAsString());
}

//  The same symbol as the PNG that the call also returned:

//  

//  Sample output:

//  kind: bitMatrix
//  modules: 21 x 21, 3 bytes per row
//  ##############              ##############
//  ##          ##      ####    ##          ##
//  ##  ######  ##  ##  ####    ##  ######  ##
//  ##  ######  ##  ##          ##  ######  ##
//  ##  ######  ##  ##  ##  ##  ##  ######  ##
//  ##          ##  ####  ##    ##          ##
//  ##############  ##  ##  ##  ##############
//                  ####
//  ##  ##########      ####    ##########
//      ####          ##  ########    ######
//  ####  ########    ####  ##  ####      ####
//        ##  ##      ############    ####  ##
//    ######  ####  ######  ##    ##  ##
//                  ##  ##  ##    ##  ##    ##
//  ##############        ##  ##    ##      ##
//  ##          ##  ##  ##        ######  ####
//  ##  ######  ##  ####  ##  ##    ##
//  ##  ######  ##  ##  ############    ##
//  ##  ######  ##  ##      ##  ####  ##
//  ##          ##    ##  ########          ##
//  ##############  ##      ##      ######