Awesome-qr.js

An awesome~~(simple)~~ QR code generator written in JavaScript.

点此阅读简体中文版本文档

Live demo

Check out our brand-new live demo.

Or you can also access the live demo by typing bitcat.cc/awesome in the browser on your smartphone.

Compatibility

Awesome-qr.js is compatible with following browsers.

Chrome 4+ (Chrome for Android 53+)
Firefox 3.6+ (Firefox for Android 49+)
Opera 9+ (Opera Mobile 10+)
Safari 4+ (iOS Safari 3.2+)
Android Browser 3+
Edge 12+
IE 9+

Gallery

These QR codes were made with Awesome-qr.js 🤗

Play with Awesome-qr.js

Node.js

Type definitions are included in the npm package.

Please read ⚠️

Awesome-qr.js uses node-canvas as its drawing backend. You might need to take a look at its documentation to ensure that node-canvas works on your environment.

yarn add awesome-qr // using Yarn
npm install --save awesome-qr // using NPM

Awesome-qr.js prior to v2.0.0 does not work well in Node.js environment and Awesome-qr.js prior to v1.2.0 does not work in Node.js environment.

const { AwesomeQR } = require("awesome-qr");
const fs = require("fs");

// ...

const background = fs.readFileSync("background.png");

const buffer = await new AwesomeQR({
  text: "AwesomeQR by Makito - Awesome, right now.",
  size: 500,
  backgroundImage: background,
}).draw();

fs.writeFileSync("qrcode.png", buffer);

Browsers

<!-- import to the global scope -->
<script src="dist/awesome-qr.js"></script>

<!-- or use require.js -->
<script>
  require(["dist/awesome-qr.js"], (AwesomeQR) => ...);
</script>

var background;
var reader = new FileReader();
reader.onload = function () {
  background = this.result;
  new AwesomeQR({
    text: "AwesomeQR by Makito - Awesome, right now.",
    size: 500,
    backgroundImage: background,
  }).draw().then((dataURL) => );
};
reader.readAsDataURL(file);

More examples

1. With a background image

α. Use in Node.js (on server side)

let request = require("request");
let AwesomeQR = require("awesome-qr");
const { Image } = require("canvas");

let options = {
  url: "https://avatars3.githubusercontent.com/u/5277268?s=460&v=4",
  method: "GET",
  encoding: null,
  // ^ this is necessary since we are not going to
  //   get the image as a string.
};

request.get(options, (error, response, body) => {
  if (!error && response.statusCode === 200) {
    // load the background image
    let backgroundImage = new Image();
    backgroundImage.src = body;

    new AwesomeQR().create({
      text: "Makito loves Kafuu Chino.",
      size: 500,
      backgroundImage: backgroundImage,
      autoColor: true,
      callback: (data) => {
        if (data === undefined) {
          console.log("failed to generate the QR code");
        } else {
          // play with binary PNG data
        }
      },
    });
  } else {
    console.log("failed to get the background image");
  }
});

Note: Background images other than PNG is not supported under Node.js mode. You may get a Error: Image given has not completed loading error if you are using other image formats.

β. Use in the browser

var img = new Image();
img.crossOrigin = "Anonymous";
img.onload = () => {
  AwesomeQR.create({
    text: "Makito loves Kafuu Chino.",
    size: 800,
    margin: 20,
    backgroundImage: img,
    bindElement: "qrcode",
  });
};
img.src = "https://avatars3.githubusercontent.com/u/5277268?s=460&v=4";

Note that the Image loads images asynchronously; that is to say, you will need to set a callback in order to use the image after it has finished loading. For more information, please follow the issue #8.

2. With a logo image at center

α. Use in Node.js (on server side)

Not yet supported.

β. Use in the browser

var logo = new Image();
logo.crossOrigin = "Anonymous";
logo.onload = () => {
  AwesomeQR.create({
    text: "Makito loves Kafuu Chino.",
    size: 800,
    margin: 20,
    logoImage: logo,
    bindElement: "qrcode",
  });
};
logo.src = "https://avatars3.githubusercontent.com/u/5277268?s=460&v=4";

3. Use a GIF image as background

α. Use in Node.js (on server side)

Not yet supported.

β. Use in the browser

Note that the option gifBackground only accepts ArrayBuffer, which represents a GIF image's data. Some conversions need to be done before generating the QR code.

// initialize a FileReader
var r = new FileReader();

// set up an onload listener
r.onload = function (e) {
  // get the ArrayBuffer
  var ab = e.target.result;

  AwesomeQR.create({
    text: "Makito loves Kafuu Chino.",
    size: 800,
    margin: 20,
    gifBackground: ab,
    // ^ use the ArrayBuffer
    bindElement: "qrcode",
  });
};

// read as ArrayBuffer
r.readAsArrayBuffer(file);

When gifBackground is in use, the backgroundImage option will be ignored.

It usually takes a longer time to decode and encode the GIF, and generate an animated QR code, but it depends on the size of the input file.

Options

Basic

Option	Client-side (browsers)	Server-side (Node.js)
text	Required	Required
size	Required	Required
margin	Optional	Optional
dotScale	Optional	Optional
maskedDots	Optional	Not supported
correctLevel	Optional	Optional
whiteMargin	Optional	Optional
bindElement	Optional	Not supported
callback	Optional	Optional

At here, you can use bindElement to specify the id (without the leading #) of the element you want to fill the generated QR code image into. Element can be a <div> or a <img>.

The option maskedDots is experimental.

Color scheme

Option	Client-side (browsers)	Server-side (Node.js)
colorDark	Optional	Optional
colorLight	Optional	Optional
autoColor	Optional	Optional

If autoColor is set, colorDark and colorLight will be ignored.

Background image

Option	Client-side (browsers)	Server-side (Node.js)
backgroundImage	Optional	Optional
backgroundDimming	Optional	Optional
gifBackground	Optional	Not supported

If gifBackground is set, backgroundImage will be ignored.

Logo image

Option	Client-side (browsers)	Server-side (Node.js)
logoImage	Optional	Not supported
logoScale	Optional	Not supported
logoMargin	Optional	Not supported
logoCornerRadius	Optional	Not supported

Actual size for the logo will be logoScale*(size-2*margin).

Post-processing

Option	Client-side (browsers)	Server-side (Node.js)
binarize	Optional	Not supported
binarizeThreshold	Optional	Not supported

Value of binarizeThreshold should be an integer greater than 0 and less than 255.

Extra: Default option

Awesome-qr.js will use the values below for the missing fields in the custom option.

{
	size: 800,
	margin: 20,
	dotScale: 0.35,
	whiteMargin: true,
	colorDark: "#000000",
	colorLight: "#ffffff",
	autoColor: true,
	maskedDots: false,
	correctLevel: QRErrorCorrectLevel.M,
	backgroundImage: undefined,
	backgroundDimming: 'rgba(0,0,0,0)',
	gifBackground: undefined,
	logoImage: undefined,
	logoScale: 0.2,
	logoMargin: 6,
	logoCornerRadius: 8,
	binarize: false,
	binarizeThreshold: 128,
	callback: undefined,
	bindElement: undefined
}

Support me

If you really like Awesome-qr.js, please consider making a donation to support me. Thanks!

You can find me by searching sumimakito in Alipay on Android/iOS devices, or click the links below.

Also, you can try to scan the following QR code with Alipay or WeChat.

Changelog

Ver. 1.2.0

Added the support for Node.js.

Ver. 1.1.0

Added the support for GIF backgrounds.

Ver. 1.0.10

Fixed a bug in the core library which would cause the too-early overflow.

Ver. 1.0.9

Fixed a bug which would leave an empty space on the simple QRCode image which has no alignment patterns.

Ver. 1.0.8

Fixed a bug which would leave white stripes between neighboring blocks while drawing QRCode at scale 1.0.

Ver. 1.0.7

Minor fixes.

Ver. 1.0.6

Fixed an issue related to the coordinate system.

Ver. 1.0.5

Now you may use Awesome-qr.js with require.js.
New feature: Embedding a logo image in the QR code.
Added some features which previously only available on Android platform.

Ver. 1.0.4

Compatibility improved.

Ver. 1.0.3

Now generated QR codes can be automatically filled into specified elements.

Ver. 1.0.2, 1.0.1

Published to npmjs.
Now background images can be binarized.

Ver 1.0.0

Initial release.

Special thanks

Awesome-qr.js is inspired by EFQRCode by EyreFree.

EFQRCode is a tool to generate QRCode image or recognize QRCode from image, in Swift.

If your application is in need of generating pretty QR codes in Swift, take a look at EFQRCode. It should help.

AwesomeQRCode: Designed for Android

Also, if you are developing Android apps, you can take a look at AwesomeQRCode, which is designed for Android projects.

Other versions

Vue 2.x component: Vue-qr

Copyright & License

Licensed under Apache License 2.0 License.

Copyright (c) 2017 Sumi Makito, https://www.keep.moe

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

jquery-qrcode
Copyright (c) 2011 Jerome Etienne, http://jetienne.com

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

QRCode for JavaScript
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

DzenBotas/Awesome-qr.js

Awesome-qr.js

Live demo

Compatibility

Gallery

Play with Awesome-qr.js

Node.js

Browsers

More examples

1. With a background image

α. Use in Node.js (on server side)

β. Use in the browser

2. With a logo image at center

α. Use in Node.js (on server side)

β. Use in the browser

3. Use a GIF image as background

α. Use in Node.js (on server side)

β. Use in the browser

Options

Basic

Color scheme

Background image

Logo image

Post-processing

Extra: Default option

Sponsors

Support me

Changelog

Ver. 1.2.0

Ver. 1.1.0

Ver. 1.0.10

Ver. 1.0.9

Ver. 1.0.8

Ver. 1.0.7

Ver. 1.0.6

Ver. 1.0.5

Ver. 1.0.4

Ver. 1.0.3

Ver. 1.0.2, 1.0.1

Ver 1.0.0

Special thanks

AwesomeQRCode: Designed for Android

Other versions

Copyright & License