React Native 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. React Native

import { BinData, Formats, JsonObject, StringBuilder } from '@chilkat/react-native'

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

  const json = new JsonObject();
  json.updateString('payload.text', 'CHILKAT');
  json.updateBool('output.includeModuleData', true);

  const fmt = new Formats();
  const jsonOut = new JsonObject();
  try {
    fmt.qrCode('generate', json, jsonOut);
  } catch {
    console.log(fmt.lastErrorText);
    return;
  }

  const width = jsonOut.intOf('symbols[0].moduleData.width');
  const height = jsonOut.intOf('symbols[0].moduleData.height');
  const 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.
  const bd = new BinData();
  try {
    bd.appendEncoded(jsonOut.stringOf('symbols[0].moduleData.bytesBase64'), 'base64');
  } catch {
    console.log(bd.lastErrorText);
    return;
  }

  const sbRow = new StringBuilder();
  let b = 0;
  let mask = 128;
  for (let row = 0; row < height; row++) {
    sbRow.clear();
    for (let col = 0; col < width; 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) + (Math.trunc(col / 8)));
      if (((Math.trunc(b / mask)) % 2) === 1) {
        sbRow.append('##');
      } else {
        sbRow.append('  ');
      }

      mask = Math.trunc(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
  // ##############              ##############
  // ##          ##      ####    ##          ##
  // ##  ######  ##  ##  ####    ##  ######  ##
  // ##  ######  ##  ##          ##  ######  ##
  // ##  ######  ##  ##  ##  ##  ##  ######  ##
  // ##          ##  ####  ##    ##          ##
  // ##############  ##  ##  ##  ##############
  //                 ####
  // ##  ##########      ####    ##########
  //     ####          ##  ########    ######
  // ####  ########    ####  ##  ####      ####
  //       ##  ##      ############    ####  ##
  //   ######  ####  ######  ##    ##  ##
  //                 ##  ##  ##    ##  ##    ##
  // ##############        ##  ##    ##      ##
  // ##          ##  ##  ##        ######  ####
  // ##  ######  ##  ####  ##  ##    ##
  // ##  ######  ##  ##  ############    ##
  // ##  ######  ##  ##      ##  ####  ##
  // ##          ##    ##  ########          ##
  // ##############  ##      ##      ######
}