Dart Requires Chilkat v11.7.0+

Embed a QR Code in HTML as a Data URI

See more QR Code Examples

Demonstrates putting a QR code directly into an HTML page or HTML email with no separate image file. The base64 PNG returned by QrCode becomes the src of an img tag as a data URI, which is the MIME type from outputs[0].mimeType followed by the base64 from outputs[0].base64. Dart

import 'package:chilkat/chilkat.dart';

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

  final json = CkJsonObject();
  json.updateString('payload.text', 'https://www.chilkatsoft.com/');
  json.updateInt('render.moduleSize', 5);

  final fmt = CkFormats();
  final jsonOut = CkJsonObject();
  try {
    fmt.qrCode('generate', json, jsonOut);
  } on ChilkatException catch (e) {
    print(e.lastErrorText);
    return;
  }

  // A data URI has the form  data:<MIME type>;base64,<base64 data>
  final sbHtml = CkStringBuilder();
  sbHtml.append('<html><body><p>Scan to visit chilkatsoft.com</p><img alt="QR code" width="');
  sbHtml.appendInt(jsonOut.intOf('outputs[0].width'));
  sbHtml.append('" height="');
  sbHtml.appendInt(jsonOut.intOf('outputs[0].height'));
  sbHtml.append('" src="data:');
  sbHtml.append(jsonOut.stringOf('outputs[0].mimeType'));
  sbHtml.append(';base64,');
  sbHtml.append(jsonOut.stringOf('outputs[0].base64'));
  sbHtml.append('"></body></html>');

  try {
    sbHtml.writeFile('qa_output/qr_page.html', 'utf-8', false);
  } on ChilkatException catch (e) {
    print(e.lastErrorText);
    return;
  }

  print('image: ${jsonOut.intOf('outputs[0].width')} x ${jsonOut.intOf('outputs[0].height')} pixels');
  print('HTML length: ${sbHtml.length}');

  // The page, as a browser shows it:

  // 

  // Sample output:

  // image: 185 x 185 pixels
  // HTML length: 1211
}