React Native Requires Chilkat v11.7.0+

QR Code Colors and Transparent Background

See more QR Code Examples

Demonstrates colored QR codes. render.foreground is the color of the dark modules and render.background the color behind them, each as #RRGGBB. Either can instead be an object with a color and an opacity from 0 to 1, and a background opacity of 0 gives a PNG with a transparent background to place over a page or a design. Readers need contrast: keep the modules clearly darker than whatever ends up behind them. React Native

import { Formats, JsonObject } 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 fmt = new Formats();
  const jsonOut = new JsonObject();

  // Dark blue modules on a pale yellow background.
  const json = new JsonObject();
  json.updateString('payload.text', 'https://www.chilkatsoft.com/');
  json.updateInt('render.moduleSize', 6);
  json.updateString('render.foreground', '#1B3A6B');
  json.updateString('render.background', '#FFF8DC');
  json.updateString('output.path', 'qa_output/qr_blue.png');
  json.updateBool('output.overwrite', true);
  json.updateString('output.return', 'none');
  try {
    fmt.qrCode('generate', json, jsonOut);
  } catch {
    console.log(fmt.lastErrorText);
    return;
  }

  console.log(`colored: ${jsonOut.stringOf('outputs[0].path')}, ${jsonOut.intOf('outputs[0].byteCount')} bytes`);

  // The image written to qa_output/qr_blue.png:

  // 

  // The same modules on a fully transparent background.
  const json2 = new JsonObject();
  json2.updateString('payload.text', 'https://www.chilkatsoft.com/');
  json2.updateInt('render.moduleSize', 6);
  json2.updateString('render.foreground', '#1B3A6B');
  json2.updateString('render.background.color', '#FFFFFF');
  json2.updateNumber('render.background.opacity', '0');
  json2.updateString('output.path', 'qa_output/qr_transparent.png');
  json2.updateBool('output.overwrite', true);
  json2.updateString('output.return', 'none');
  try {
    fmt.qrCode('generate', json2, jsonOut);
  } catch {
    console.log(fmt.lastErrorText);
    return;
  }

  console.log(`transparent: ${jsonOut.stringOf('outputs[0].path')}, ${jsonOut.intOf('outputs[0].byteCount')} bytes`);

  // qa_output/qr_transparent.png, placed here over a checkerboard and over a colored page
  // to show that whatever is behind the image shows through:

  // 

  // Sample output:

  // colored: qa_output/qr_blue.png, 1345 bytes
  // transparent: qa_output/qr_transparent.png, 1377 bytes
}