		{
		"name": "awesome-qr",
		"version": "1.2.0",
		"description": "An awesome QR code generator written in JavaScript.",
		"main": "awesome-qr-node.js",
		"scripts": {
		"test": "echo \"Error: no test specified\" && exit 1"
		},
		"repository": {
		"type": "git",
		"url": "git+https://github.com/SumiMakito/Awesome-qr.js.git"
		},
		"keywords": [
		"qr",
		"qrcode",
		"barcode"
		],
		"author": "Makito <sumimakito@hotmail.com>",
		"license": "Apache-2.0",
		"bugs": {
		"url": "https://github.com/SumiMakito/Awesome-qr.js/issues"
		},
		"homepage": "https://github.com/SumiMakito/Awesome-qr.js#readme",
		"dependencies": {
		"canvas": "^1.6.7",
		"request": "^2.83.0"
		}
		}
		"name": "awesome-qr",
		"version": "2.0.0-beta.0",
		"description": "An awesome but simple QR code generator written in JavaScript.",
		"main": "./lib/awesome-qr.js",
		"types": "./lib/awesome-qr.d.ts",
		"scripts": {
		"test": "echo \"Error: no test specified\" && exit 1",
		"build": "webpack --config webpack.config.js",
		"prepublish": "webpack --config webpack.config.js && tsc"
		},
		"repository": {
		"type": "git",
		"url": "git+https://github.com/SumiMakito/Awesome-qr.js.git"
		},
		"keywords": [
		"qr",
		"qrcode",
		"barcode"
		],
		"author": "Makito <sumimakito@hotmail.com>",
		"license": "Apache-2.0",
		"bugs": {
		"url": "https://github.com/SumiMakito/Awesome-qr.js/issues"
		},
		"homepage": "https://github.com/SumiMakito/Awesome-qr.js#readme",
		"dependencies": {
		"buffer": "^5.6.0",
		"canvas": "^2.6.1",
		"js-binary-schema-parser": "^2.0.0"
		},
		"devDependencies": {
		"@types/node": "^14.0.14",
		"ts-loader": "^7.0.5",
		"typescript": "^3.9.6",
		"webpack": "^4.43.0",
		"webpack-cli": "^3.3.12"
		},
		"optionalDependencies": {}
		}

484

README.md

		@@ -1,2 +0,2 @@
		# Awesome-qr.js
		# Awesome-qr.js <!-- omit in toc -->

		@@ -6,404 +6,264 @@ [![npm version](https://badge.fury.io/js/awesome-qr.svg)](https://badge.fury.io/js/awesome-qr)

		An awesome<del>(simple)</del> QR code generator written in JavaScript.
		An awesome but simple QR code generator written in JavaScript.

		[点此阅读简体中文版本文档](README-zh_CN.md)
		## Gallery <!-- omit in toc -->

		### Live demo
		> These QR codes were made with Awesome-qr.js 🤗

		Check out our [brand-new live demo](https://www.bitcat.cc/webapp/awesome-qr/index.html).
		<table>
		<tr>
		<td valign="top"><img src="art/gallery-1.png" width="350"></td>
		<td valign="top"><img src="art/gallery-2.png" width="350"></td>
		<td valign="top"><img src="art/gallery-3.gif" width="350"></td>
		</tr>
		</table>

		Or you can also access the live demo by typing `bitcat.cc/awesome` in the browser on your smartphone.
		## Contents <!-- omit in toc -->

		### Compatibility
		- [Getting Started](#getting-started)
		- [Node.js](#nodejs)
		- [Browsers](#browsers)
		- [Options](#options)
		- [text](#text)
		- [size](#size)
		- [margin](#margin)
		- [typeNumber](#typenumber)
		- [correctLevel](#correctlevel)
		- [colorDark](#colordark)
		- [colorLight](#colorlight)
		- [autoColor](#autocolor)
		- [backgroundImage](#backgroundimage)
		- [backgroundDimming](#backgrounddimming)
		- [gifBackground](#gifbackground)
		- [whiteMargin](#whitemargin)
		- [dotScale](#dotscale)
		- [logoImage](#logoimage)
		- [logoScale](#logoscale)
		- [logoMargin](#logomargin)
		- [logoCornerRadius](#logocornerradius)
		- [Sponsors](#sponsors)
		- [Changelog](#changelog)
		- [Special thanks](#special-thanks)
		- [AwesomeQRCode: Designed for Android](#awesomeqrcode-designed-for-android)
		- [Other versions](#other-versions)
		- [Copyright & License](#copyright--license)

		> Awesome-qr.js is compatible with following browsers.
		## Getting Started

		- 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+
		### Node.js

		### Samples
		_Type definitions are included in the npm package._

		Try to scan these QR codes below with your smart phone.
		> Please read ⚠️
		>
		> Awesome-qr.js uses node-canvas as its drawing backend. You might need to take a look at [its documentation](https://github.com/Automattic/node-canvas#installation) to ensure that node-canvas works on your environment.

		#### Simple & normal styles

		Sample 1\| Sample 2\| Sample 3
		------------ \| ------------- \| -------------
		<img src="https://raw.githubusercontent.com/SumiMakito/Awesome-qr.js/master/art/awesome-qr-1.png" width="350"> \| <img src="https://raw.githubusercontent.com/SumiMakito/Awesome-qr.js/master/art/awesome-qr-2.png" width="350"> \| <img src="https://raw.githubusercontent.com/SumiMakito/Awesome-qr.js/master/art/awesome-qr-3.png" width="350">

		#### With <del>magical</del> extra options

		Binarized\|With a logo\|Custom color\|With GIF background
		------------ \| ------------- \| ------------- \| -------------
		<img src="https://raw.githubusercontent.com/SumiMakito/Awesome-qr.js/master/art/awesome-qr-4.png" width="350"> \| <img src="https://raw.githubusercontent.com/SumiMakito/Awesome-qr.js/master/art/awesome-qr-5.png" width="350"> \| <img src="https://raw.githubusercontent.com/SumiMakito/Awesome-qr.js/master/art/awesome-qr-6.png" width="350"> \| <img src="https://raw.githubusercontent.com/SumiMakito/Awesome-qr.js/master/art/awesome-qr-7.gif" width="350">

		### Play with Awesome-qr.js

		> Note: Module 'awesome-qr' on npmjs has been totally changed after v1.2.0.

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

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

		```javascript
		let AwesomeQR = require('awesome-qr');
		> 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.

		new AwesomeQR().create({
		text: 'Makito loves Kafuu Chino.',
		size: 500,
		callback: (data) => {
		// binary PNG data
		}
		});
		```
		```js
		const { AwesomeQR } = require("awesome-qr");
		const fs = require("fs");

		#### β. Use in the browser
		// ...

		> Note: There's no need to use npmjs. We just need require.js here.
		const background = fs.readFileSync("background.png");

		Copy JavaScript files under `dist/` to a appropriate place, for example – `js/`.
		const buffer = await new AwesomeQR({
		text: "AwesomeQR by Makito - Awesome, right now.",
		size: 500,
		backgroundImage: background,
		}).draw();

		The file structure might look like the tree below:

		fs.writeFileSync("qrcode.png", buffer);
		```
		\|- ...
		\|- index.html
		\|- js
		\|- awesome-qr.js
		\|- gif.js
		\|- gif.worker.js
		\|- require.js
		\|- ...
		```

		Import require.js:
		### Browsers

		```html
		<script type="text/javascript" src="js/require.js"></script>
		```
		<!-- import to the global scope -->
		<script src="dist/awesome-qr.js"></script>

		Then, require awesome-qr.js:

		```javascript
		// This will specify the base path for awesome-qr.js, gif.js, and gif.worker.js.
		// In the case showed above, the base path should be "js".
		// The variable's name should NOT be changed.
		var __awesome_qr_base_path = "js";

		// require awesome-qr.js
		require([__awesome_qr_base_path + '/awesome-qr'], function (AwesomeQR) {
		// ... and make use of it
		AwesomeQR.create({
		text: 'Makito loves Kafuu Chino.',
		size: 800,
		margin: 20,
		bindElement: 'qrcode'
		});
		});
		<!-- or use require.js -->
		<script>
		require(["dist/awesome-qr.js"], (AwesomeQR) => ...);
		</script>
		```
		### More examples

		#### 1. With a background image

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

		```javascript
		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.
		```js
		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) => );
		};

		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');
		}
		});
		reader.readAsDataURL(file);
		```

		> 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.
		## Options

		##### β. Use in the browser
		> _Options_ is an object that you can pass to the generator to customize your QR code.

		```javascript
		var img = new Image();
		img.crossOrigin = "Anonymous";
		img.onload = () => {
		AwesomeQR.create({
		text: 'Makito loves Kafuu Chino.',
		size: 800,
		margin: 20,
		backgroundImage: img,
		bindElement: 'qrcode'
		});
		```ts
		Options {
		text: string;
		size?: number;
		margin?: number;
		typeNumber?: number;
		correctLevel?: number;
		dotScale?: number;
		colorDark?: string;
		colorLight?: string;
		autoColor?: boolean;
		backgroundImage?: string \| Buffer;
		backgroundDimming?: string;
		gifBackground?: ArrayBuffer;
		whiteMargin?: boolean;
		logoImage?: string \| Buffer;
		logoScale?: number;
		logoMargin?: number;
		logoCornerRadius?: number;
		};
		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](https://github.com/SumiMakito/Awesome-qr.js/issues/8).
		### text

		`string`

		#### 2. With a logo image at center
		Text to be encoded in the QR code.

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

		Not yet supported.
		`number?, default: 800`

		##### β. Use in the browser
		Size of the QR code in pixel.

		```javascript
		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";
		```
		### margin

		#### 3. Use a GIF image as background
		`number?, default: 20`

		##### α. Use in Node.js (on server side)
		Size of margins around the QR code body in pixel.

		Not yet supported.
		### typeNumber

		##### β. Use in the browser
		`number?, default: 4`

		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.
		> For more information, please refer to [Types of QR Code \| QRcode.com \| DENSO WAVE](https://www.qrcode.com/en/codes/).

		```javascript
		// initialize a FileReader
		var r = new FileReader();
		Type number of the QR code.

		// 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'
		});
		};
		### correctLevel

		// read as ArrayBuffer
		r.readAsArrayBuffer(file);
		```
		`number?, default: QRErrorCorrectLevel.M = 0`

		> When `gifBackground` is in use, the `backgroundImage` option will be ignored.
		> For more information, please refer to [Error correction feature \| QRcode.com \| DENSO WAVE](https://www.qrcode.com/en/about/error_correction.html).

		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.
		Error correction level of the QR code.

		### Options
		### colorDark

		#### Basic
		`string?, CSS <color>, default: "#000000"`

		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
		> For more information about CSS <color>, please refer to [<color> - CSS: Cascading Style Sheets \| MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)

		> 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>`.
		Color of the blocks on the QR code.

		> The option `maskedDots ` is experimental.
		### colorLight

		#### Color scheme
		`string?, CSS <color>, default: "#ffffff"`

		Option \| Client-side (browsers) \| Server-side (Node.js)
		:------\|:-----------------------\|:---------------------
		colorDark \| Optional \| Optional
		colorLight \| Optional \| Optional
		autoColor \| Optional \| Optional
		Color of the empty areas on the QR code.

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

		#### Background image
		`boolean?, default: true`

		Option \| Client-side (browsers) \| Server-side (Node.js)
		:------\|:-----------------------\|:---------------------
		backgroundImage \| Optional \| Optional
		backgroundDimming \| Optional \| Optional
		gifBackground \| Optional \| Not supported
		Automatically calculate the _colorDark_ value from the QR code's background.

		> If `gifBackground ` is set, `backgroundImage ` will be ignored.
		### backgroundImage

		#### Logo image
		`(string\|Buffer)?, default: undefined`

		Option \| Client-side (browsers) \| Server-side (Node.js)
		:------\|:-----------------------\|:---------------------
		logoImage \| Optional \| Not supported
		logoScale \| Optional \| Not supported
		logoMargin \| Optional \| Not supported
		logoCornerRadius \| Optional \| Not supported
		Background image to be used in the QR code.

		> Actual size for the logo will be `logoScale(size-2margin)`.
		Accepts a `data:` string in web browsers or a Buffer in Node.js.

		#### Post-processing
		### backgroundDimming

		Option \| Client-side (browsers) \| Server-side (Node.js)
		:------\|:-----------------------\|:---------------------
		binarize \| Optional \| Not supported
		binarizeThreshold \| Optional \| Not supported
		`string?, CSS <color>, default: "rgba(0, 0, 0, 0)"`

		> Value of `binarizeThreshold ` should be an integer greater than 0 and less than 255.
		Color of the dimming mask above the background image.

		#### Extra: Default option
		### gifBackground

		Awesome-qr.js will use the values below for the missing fields in the custom option.
		`ArrayBuffer?, default: undefined`

		```json
		{
		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
		}
		```
		GIF background image to be used in the QR code.

		### Sponsors
		### whiteMargin

		It is those generous sponsors who supports this project makes the Awesome-qr.js more awesome!
		`boolean?, default: true`

		I'd like to express my sincere appreciation to all the generous sponsors.
		Use a white margin instead of a transparent one which reveals the background of the QR code on margins.

		- [Coxxs](https://coxxs.me/)
		### dotScale

		Since sponsors' names will not show up here without their permissions, the list above only shows a part of all the sponsors. If you wish to have your name shown up here, please feel free to contact me.

		### Support me
		`number?, default: 0.35`

		If you really like Awesome-qr.js, please consider making a donation to support me. Thanks!
		Ratio of the real size to the full size of the blocks.

		You can find me by searching `sumimakito` in Alipay on Android/iOS devices, or click the links below.
		This can be helpful when you want to make more parts of the background visible.

		- [PayPal](https://www.paypal.me/makito)
		- [Alipay](https://qr.alipay.com/a6x02021re1jk4ftcymlw79)
		### logoImage

		Also, you can try to scan the following QR code with Alipay.
		`(string\|Buffer)?, default: undefined`

		<img src="https://raw.githubusercontent.com/SumiMakito/Misc/master/alipay-2.jpg" width="300">
		Logo image to be displayed at the center of the QR code.

		### Changelog
		Accepts a `data:` string in web browsers or a Buffer in Node.js.

		##### Ver. 1.2.0
		When set to `undefined` or `null`, the logo is disabled.

		- Added the support for Node.js.
		### logoScale

		##### Ver. 1.1.0
		`number?, default: 0.2`

		- Added the support for GIF backgrounds.
		Ratio of the logo size to the QR code size.

		##### Ver. 1.0.10
		### logoMargin

		- Fixed a bug in the core library which would cause the too-early overflow.
		`number?, default: 6`

		##### Ver. 1.0.9
		Size of margins around the logo image in pixels.

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

		![](art/bug-fix-1.0.9.png)
		`number?, default: 8`

		##### Ver. 1.0.8
		Corner radius of the logo image in pixels.

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

		![](art/bug-fix-1.0.8.png)
		It is those generous sponsors who supports this project makes the Awesome-qr.js more awesome!

		##### Ver. 1.0.7
		I'd like to express my sincere appreciation to all the generous sponsors.

		- Minor fixes.
		- [Coxxs](https://coxxs.me/)

		##### Ver. 1.0.6
		Since sponsors' names will not show up here without their permissions, the list above only shows a part of all the sponsors. If you wish to have your name shown up here, please feel free to contact me.

		- Fixed an issue related to the coordinate system.
		## Changelog

		##### Ver. 1.0.5
		[Check the full changelog](CHANGELOG.md)

		- Now you may use Awesome-qr.js with [require.js](http://requirejs.org/).
		- New feature: Embedding a logo image in the QR code.
		- Added some features which previously only available on Android platform.
		## Special thanks

		##### 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](https://github.com/EyreFree/EFQRCode).
		@@ -415,18 +275,18 @@

		### AwesomeQRCode: Designed for Android
		## AwesomeQRCode: Designed for Android

		Also, if you are developing Android apps, you can take a look at [AwesomeQRCode](https://github.com/SumiMakito/AwesomeQRCode), which is designed for Android projects.

		### Other versions
		## Other versions

		- Vue 2.x component: [Vue-qr](https://github.com/Binaryify/vue-qr)

		### Copyright & License
		## Copyright & License

		Copyright © 2017 Sumi Makito
		Copyright © 2017-2020 Sumi Makito

		Licensed under Apache License 2.0 License.
		Awesome-qr.js is licensed under Apache License 2.0 License.

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

		@@ -476,5 +336,5 @@ Licensed under the Apache License, Version 2.0 (the "License");
		http://www.opensource.org/licenses/mit-license.php
		The word "QR Code" is registered trademark of
		The word "QR Code" is registered trademark of
		DENSO WAVE INCORPORATED
		http://www.denso-wave.com/qrcode/faqpatent-e.html
		```

.idea/Awesome-qr.js.iml

.idea/misc.xml

.idea/modules.xml

.idea/vcs.xml

.idea/workspace.xml

awesome-qr-node.js

dist/awesome-qr.js

dist/awesome-qr.min.js

dist/gif.js

dist/gif.worker.js

dist/require.js

README-zh_CN.md

awesome-qr - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics

Dependency changes