qr-encode

Encode a string into a QR code.

npm install qr-encode
1 downloads in the last day
3 downloads in the last week
4 downloads in the last month

qr-encode

JavaScript component to encode strings into QR codes.

It's a repackage of http://d-project.googlecode.com/svn/trunk/misc/qrcode/js/qrcode.js with minor modifcations by https://github.com/pointbiz/bitaddress.org/blob/master/src/qrcode.js and myself for package support.

Install

Node.js/Browserify

npm install --save qr-encode

Component

component install cryptocoinjs/qr-encode

Bower

bower install qr-encode

Script

<script src="/path/to/qr-encode.js"></script>

QR Codes

You should glance at this: http://en.wikipedia.org/wiki/QR_code

Error Correction:

  • Level L (Low) 7% of codewords can be restored.
  • Level M (Medium) 15% of codewords can be restored.
  • Level Q (Quartile) 25% of codewords can be restored.
  • Level H (High) 30% of codewords can be restored.

Usage

Assuming that you have the following HTML and JS:

//from: https://github.com/pointbiz/bitaddress.org/blob/master/src/ninja.misc.js

function getTypeNumber(text) {
  var lengthCalculation = text.length * 8 + 12; // length as calculated by the QRCode
  if (lengthCalculation < 72) { return 1; }
  else if (lengthCalculation < 128) { return 2; }
  else if (lengthCalculation < 208) { return 3; }
  else if (lengthCalculation < 288) { return 4; }
  else if (lengthCalculation < 368) { return 5; }
  else if (lengthCalculation < 480) { return 6; }
  else if (lengthCalculation < 528) { return 7; }
  else if (lengthCalculation < 688) { return 8; }
  else if (lengthCalculation < 800) { return 9; }
  else if (lengthCalculation < 976) { return 10; }
  return null;
}
<div id="qr-element">
<!-- QR Code will go here -->
</div>

IMG Tag

(http://d-project.googlecode.com/svn/trunk/misc/qrcode/js/sample.html)

function createQRCode(text, typeNumber, errorCorrectLevel) {
  typeNumber = typeNumber || getTypeNumber(text)
  var qr = QRCode(typeNumber || 4, errorCorrectLevel || QRCode.ErrorCorrectLevel.H)
  qr.addData(text)
  qr.make()

  return qr.createImgTag()
}

then ...

var qrEl = document.getElementById('qr-element')
qrEl.innerHTML = createQRCode('testing qr code!')

Canvas

//from: https://github.com/pointbiz/bitaddress.org/blob/master/src/ninja.misc.js

function createCanvas(text, sizeMultiplier) {
  sizeMultiplier = (sizeMultiplier == undefined) ? 2 : sizeMultiplier; // default 2
  // create the qrcode itself
  var typeNumber = getTypeNumber(text);
  var qrcode = new QRCode(typeNumber, QRCode.ErrorCorrectLevel.H);
  qrcode.addData(text);
  qrcode.make();
  var width = qrcode.getModuleCount() * sizeMultiplier;
  var height = qrcode.getModuleCount() * sizeMultiplier;
  // create canvas element
  var canvas = document.createElement('canvas');
  var scale = 10.0;
  canvas.width = width * scale;
  canvas.height = height * scale;
  canvas.style.width = width + 'px';
  canvas.style.height = height + 'px';
  var ctx = canvas.getContext('2d');
  ctx.scale(scale, scale);
  // compute tileW/tileH based on width/height
  var tileW = width / qrcode.getModuleCount();
  var tileH = height / qrcode.getModuleCount();
  // draw in the canvas
  for (var row = 0; row < qrcode.getModuleCount(); row++) {
    for (var col = 0; col < qrcode.getModuleCount(); col++) {
      ctx.fillStyle = qrcode.isDark(row, col) ? "#000000" : "#ffffff";
      ctx.fillRect(col * tileW, row * tileH, tileW, tileH);
    }
  }
  // return just built canvas
  return canvas;
}

then..

var qrEl = document.getElementById('qr-element')
qrEl.innerHTML = ''
qrEl.appendChild(createCanvas('testing qr code!'))

HTML Table Tag (legacy browsers)

/*from: https://github.com/pointbiz/bitaddress.org/blob/master/src/main.css*/

.qrcodetable { border-width: 0px; border-style: none; border-color: #0000ff; border-collapse: collapse; }
.qrcodetddark { border-width: 0px; border-style: none; border-color: #0000ff; border-collapse: collapse; padding: 0; margin: 0; width: 2px; height: 2px; background-color: #000000; }
.qrcodetdlight { border-width: 0px; border-style: none; border-color: #0000ff; border-collapse: collapse; padding: 0; margin: 0; width: 2px; height: 2px; background-color: #ffffff; }
//from: https://github.com/pointbiz/bitaddress.org/blob/master/src/ninja.misc.js

function createTableHtml(text) {
  var typeNumber = getTypeNumber(text)
  var qr = new QRCode(typeNumber, QRCode.ErrorCorrectLevel.H);
  qr.addData(text);
  qr.make();
  var tableHtml = "<table class='qrcodetable'>";
  for (var r = 0; r < qr.getModuleCount(); r++) {
    tableHtml += "<tr>";
    for (var c = 0; c < qr.getModuleCount(); c++) {
      if (qr.isDark(r, c)) {
        tableHtml += "<td class='qrcodetddark'/>";
      } else {
        tableHtml += "<td class='qrcodetdlight'/>";
      }
    }
    tableHtml += "</tr>";
  }
  tableHtml += "</table>";
  return tableHtml;
}

then...

var qrEl = document.getElementById('qr-element')
qrEl.innerHTML = createTableHtml('testing qr code!')

Credits

License

Most of the code:

Copyright (c) 2009 Kazuhiko Arase

URL: http://www.d-project.com/

Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php

The word 'QR Code' is registered trademark of DENSO WAVE INCORPORATED http://www.denso-wave.com/qrcode/faqpatent-e.html

npm loves you