QR code generation library in javascript

Question

I'm currently looking for a js library that can encode text in qr codes. The only one I've been able to find so far seems broken, although other people claim to be using it. The sample page doesn't work. By playing a bit with it I managed to generate codes but they don't get decoded by the phone software.

Is there another library is js for this? Has anyone managed to get it to work?

I'm not interested in a solution that pulls the code from an online service (kaywa, google etc.).

---

Update:

Well, you guys are right, that library does work. My problem was that I tried including it in a HTML5 Boilerplate page, and document.write doesn't seem to work in that. I modified the sample code anyway to make the browser draw in a canvas not a table and I got the order of the fillRect function backwards. Below is the corrected function call.

context.fillRect(c * UNIT_SIZE, r * UNIT_SIZE, UNIT_SIZE, UNIT_SIZE);
// it's column-row, not row-column; don't ask why :)

Since I don't get my image transposed anymore :), now the qr decodes fine. Thanks for the support.

Answer 1

I wrote a simple GPLv3 qr encoder in javascript that is local, uses HTML5 and is really fast as it is a port of an embedded C version I wrote for Atmel AVR processors.

http://code.google.com/p/jsqrencode/downloads/list

There is a live version (which is saveable as a webapp on iOS devices) at http://zdez.org/qrenc3.html (save to home, opens in safari so you can copy the image or use airprint)

Here is the link to the downloadable source code.

Answer 2

Script you posted is WORKING, sample.html is not parsed as HTML.

Answer 3

jquery-qrcode jQuery plugin also generates QR code using HTML5 canvas element or HTML table, if canvas is not supported.

https://github.com/jeromeetienne/jquery-qrcode

$('#test').qrcode({
    width: 120,
    height: 120, 
    text: "https://github.com/jeromeetienne/jquery-qrcode"});

Working jsFiddle demo:

http://jsfiddle.net/maxim75/YwN8p/4/

Answer 4

There is a simple JavaScript library which I found sometime back called QRCode.js.

QRCode.js is a cross-browser JavaScript library which allows you to generate QRCodes on the fly, on the client-side. It makes use of HTMl5 Canvas and Tables to display the QRCode. The library itself has no dependencies whatsoever.

To generate a QRCode, you just need to include the JavaScript library and then pass as parameters to the QRCode function, the text you want to encode as the QRCode, the width & height of the QRCode you want to display, as well as your specified foreground color and background color.

Answer 5

I've found a working javascript-jquery based qrcode generator that you might be interested. Its opensource and it's really working. Here is the link: https://github.com/jeromeetienne/jquery-qrcode

The good thing about this one is that its light weight and it does not call any remote service or website.

Answer 6

Google has a QR code generator as part of their Chart Tools that you can use here.

http://code.google.com/apis/chart/infographics/docs/qr_codes.html

Answer 7

I am using the ShieldUI Lite QR Code, which can be found here:

https://github.com/shieldui/shieldui-lite

Contains all versions of the QR Code, all Error levels.

Answer 8

The QR code in the initial post only supports up to 271 bytes (version 10, Size = 57x57, EC level L).

To make it support the full specs of QR code (version 40, 177x177, 2953 bytes), you have to add more values into its RS_BLOCK_TABLE.

See the remaining matrices (version 11-40) here: http://two.pairlist.net/pipermail/reportlab-users/2010-September/009707.html

Answer 9

Maksym's solution is better than Google's library because it runs at local does not need to call Google API. also if you don't use jQuery, you can use this one at https://github.com/amanuel/JS-HTML5-QRCode-Generator

Answer 10

Another HTML5 solution is http://davidshimjs.github.io/qrcodejs/ with IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile browser compatibility

Answer 11

As Canvas/PNG

There is also the new kjua from the same author as the "old" jQuery.qrcode.

As Canvas/PNG/SVG

And QR-Code-generator by @nayuki also has the ability to create QR codes as SVGs.

Answer 12

You can use Telerik Kendo-UI to generate qrcode and barcode. It is easy to use.

Try using this example code:

QR Code: https://demos.telerik.com/kendo-ui/qrcode/index

Barcode: https://demos.telerik.com/kendo-ui/barcode/index

Answer 13

npm has a few. I have no idea which ones are good.

$ npm search qrcode
npm http GET https://registry.npmjs.org/-/all/since?stale=update_after&startkey=1379059929305
npm http 200 https://registry.npmjs.org/-/all/since?stale=update_after&startkey=1379059929305
NAME             DESCRIPTION                                                   A
jsqrcode         a node port of Lazar Laszlo's `jsqrcode` qr code decoder      =
jsqrcode-lite    Simplified version of Lazar Laszlo's `jsqrcode` for node.     =
node-zxing       ZXing Wrapper                                                 =
qr               A small library to generate QR codes with libqrencode.        =
qr-element       qrcode dom element                                            =
qr.js            qrcode encoding in javascript                                 =
qrcode           QRCode / 2d Barcode api with both server side and client side s
qrcode-emitter   Emits QR codes found in an image stream.                      =
qrcode-npm       QRCode Generator for JavaScript                               =
qrcode-terminal  QRCodes, in the terminal                                      =
qrcode.js        QR Code Detection / Decoding / Generation                     =
qread            QRcode detector & decoder                                     =
qruri            NodeJS port of Kang Seonghoon's qr.js                         =
rescode          Generate Codes (EAN13, QRCODE ..)                             =
zbar             node-zbar is a NodeJS binding to the ZBar QR Code library.   

Answer 14

I couldn't find a javascript qr code generator.

But you could Consider using Google's API:

http://code.google.com/apis/chart/docs/gallery/qr_codes.html http://togosoft.com/web/qrcode/qrcode.js

Update: I just tried http://d-project.googlecode.com/svn/trunk/misc/qrcode/js/qrcode.js and seems fine to me. The only thing I did was increase the size and made it close the TDs properly, since self closing is not correct html. http://k3rmit.org/nopaste/759 I tested 3 different strings and used a App called QRReader on my iPhone to decode.

Update 2: With var qr = new QRCode(10, QRErrorCorrectLevel.L); I was able to fit 271 chars in the QRCode however might not be the most reliable setting.

Answer 15

https://drive.google.com/open?id=0B3TWIbBcUUTwcE1vV24wQnRxNGs

above is the link of js file include it in your project and write the below code in ctp file in cake php or any where you want to use. i tested it in cake php...

<-- including the file....
<?php echo $this->Html->script('jquery.qrcode.min.js')?>
<div style='padding:100px''><img id="demo" style='width: 100px,height: 100px'></div>
<script type="text/javascript">jQuery("#demo").qrcode({text: "HEllo World!"});</script>

Answer 16

If you can't find a native JavaScript implementation, you can always AJAX the image yourself from your server.

http://www.swetake.com/qr/qr_cgi_e.html

Answer 17

I know this is an old question, but I think it is not necessary a library to generate a QR Code from a text. You just need to use the QR code API.

The implementation is very simple, we have a form with a text field that captures the content data. Whenever we press the generate button we generate a new request URL to the API this URL has two main components data and size. The former requires the text content encoded and the latter will define the size of the image. Here is the code:

const baseURL = 'https://api.qrserver.com/v1/create-qr-code/?data='
const config = '&size=120x120'
const btnElement = document.getElementById('generate')
const dataElement = document.getElementById('data')
const qrCode = document.querySelector('.qr-code')

function htmlDecode(text) {
  var div = document.createElement('div')
  div.innerHTML = text

  return ('textContent' in div) ? div.textContent : div.innerText
}

function htmlEncode(str) {
  var div = document.createElement('div')
  div[('textContent' in div) ? 'textContent' : 'innerText'] = str

  return div.innerHTML
}

window.onload = () => {
  btnElement.onclick = () => {
    qrCode.src = baseURL + encodeURIComponent(htmlEncode(dataElement.value)) + config
  }
}

.qr-code {
  max-width: 160px;
  margin: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  <div class="text-center">
    <img src="https://api.qrserver.com/v1/create-qr-code/?data=http%3A%2F%2Fwww.google.com&size=120x120" class="qr-code img-thumbnail img-responsive">
  </div>

  <div class="form-horizontal">
    <div class="form-group">
      <label class="control-label col-sm-4" for="data">Enter content:</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="data" placeholder="i.e. www.google.com">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="button" class="btn btn-default" id="generate">Generate</button>
      </div>
    </div>
  </div>
</div>