QR code generation library in javascript [closed]

Answer 1

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 2

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 3

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 4

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:

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="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>

Answer 5

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 6

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/