Javascript QR code generation library

Question

I'm currently looking for a js library that can encode text in qr codes. The only one I can find so far seems broken, although other people claim to use it. The sample page does not work. Playing a bit with this, I managed to generate codes, but they are not decoded by the phone software.

Is there any other library for js? Has anyone managed to get it to work?

I am not interested in a solution that extracts code from an online service (kaywa, google, etc.).

---

Update:

Well guys, you're right, this library works. My problem was that I tried to enable it on the HTML5 Boilerplate page, and document.write does not seem to work in this. In any case, I modified the sample code to make the browser picture in the canvas not a table, and I got the order of the fillRect function back. The following is the corrected function call.

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

Since I can’t transfer my image anymore :), now qr decodes perfectly. Thanks for the support.

Answer 1

Script You posted WORKING, sample.html is not processed as HTML.

Answer 2

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

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

There is a live version on the website http://zdez.org/qrenc3.html (which can be saved as a web application on iOS devices) (saved to home, opened in Safari so that you can copy the image or use airprint).

Here is a link to downloadable source code .

Answer 3

There is a simple JavaScript library that I once found called QRCode.js .

QRCode.js is a cross-browser JavaScript library that allows you to generate QRCodes on the fly on the client side. QRCode.js uses canvas and HTMl5 tables to display QRCode. The library itself has no dependencies.

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

Answer 4

I found a working qrcode generator based on javascript-jquery that you might be interested in. Its openource and it really works. Here is the link: https://github.com/jeromeetienne/jquery-qrcode

The good thing about this is that it is light in weight and does not invoke any remote service or website.

Answer 5

The QR code in the original message only supports up to 271 bytes (version 10, size = 57x57, level L level).

In order for it to support the full specifications of the QR code (version 40, 177x177, 2953 bytes), you need to add more values ​​to your RS_BLOCK_TABLE.

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

Answer 6

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 7

As canvas / png

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

As canvas / png / svg

And the @nayuki QR code generator also has the ability to create QR codes in the form of SVG.

Answer 8

npm has several. 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 `jsqrcode` qr code decoder = jsqrcode-lite Simplified version of Lazar Laszlo `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 qr.js = rescode Generate Codes (EAN13, QRCODE ..) = zbar node-zbar is a NodeJS binding to the ZBar QR Code library. 

Answer 9

I could not find the javascript qr code generator.

But you could consider using the Google 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 I don't care. The only thing I did was increase the size and close it correctly, since the closure itself is not the correct html. http://k3rmit.org/nopaste/759 I tested 3 different lines and used an application called QRReader on my iPhone for decoding.

Update 2: With var qr = new QRCode(10, QRErrorCorrectLevel.L); I managed to set 271 characters in QRCode, but maybe this is not the most reliable setting.

Answer 10

I know this is an old question, but I think there is no need for a library to create a QR code from 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 content data. Whenever we click the "Generate" button, we generate a new API request URL, which has two main components: data and size . The first requires encoded text content, and the second will determine the size of the image. Here is the code:

 let baseURL = 'https://api.qrserver.com/v1/create-qr-code/?data=' let config = '&size=120x120' let btn, qrCode, content; function htmlEncode(value) { return $('<div/>').text(value).html(); } $(function() { btn = $('#generate'); qrCode = $('.qr-code'); content = $('#content'); btn.click(function() { qrCode.attr('src', baseURL + encodeURIComponent(htmlEncode(content.val())) + config); }); }); 

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

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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="content">Enter content:</label> <div class="col-sm-10"> <input type="text" class="form-control" id="content" placeholder="ie 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> 

Answer 11

If you cannot find the built-in JavaScript implementation, you can always use the AJAX image from your server.

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