JavaScript Requires Chilkat v11.7.0+

QR Code with a Text Caption

See more QR Code Examples

Demonstrates printing a line of text under a QR code, such as the order number or the address the code holds, so that a person can read it too. render.text turns the caption on and gives its value, which is printable ASCII and is drawn in a built-in font that needs no font files. The caption can go above or below the symbol, be aligned left, center or right, and be scaled. 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","https://www.chilkatsoft.com/order/12345");
json.UpdateInt("render.moduleSize",6);

//  The caption.  It need not be the same as the text in the QR code.
json.UpdateBool("render.text.enabled",true);
json.UpdateString("render.text.value","ORDER 12345");
//  position is "below" (the default) or "above".  alignment is "center" (the default), "left" or "right".
json.UpdateString("render.text.position","below");
//  Each dot of the caption's font is drawn this many pixels wide.
json.UpdateInt("render.text.scale",3);

json.UpdateString("output.path","qa_output/qr_caption.png");
json.UpdateBool("output.overwrite",true);
json.UpdateString("output.return","none");

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

console.log("caption: " + jsonOut.StringOf("measurements[0].text"));
console.log("caption scale: " + jsonOut.IntOf("measurements[0].textScale"));
console.log("height added for the caption: " + jsonOut.IntOf("measurements[0].textBandPx") + " pixels");
console.log("image: " + jsonOut.IntOf("measurements[0].canvasWidth") + " x " + jsonOut.IntOf("measurements[0].canvasHeight") + " pixels");

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

//  

//  Sample output:

//  caption: ORDER 12345
//  caption scale: 3
//  height added for the caption: 21 pixels
//  image: 222 x 243 pixels