qr code generator

Ryan Day

Last update: Jan 4, 2023

Related tags

Data Visualization node-qrcode

Overview

node-qrcode

QR code/2d barcode generator.

Highlights
Installation
Usage
Error correction level
QR Code capacity
Encoding Modes
Binary data
Multibyte characters
API
GS1 QR Codes
Credits
License

Highlights

Works on server and client (and react native with svg)
CLI utility
Save QR code as image
Support for Numeric, Alphanumeric, Kanji and Byte mode
Support for mixed modes
Support for chinese, cyrillic, greek and japanese characters
Support for multibyte characters (like emojis 😄 )
Auto generates optimized segments for best data compression and smallest QR Code size
App agnostic readability, QR Codes by definition are app agnostic

Installation

Inside your project folder do:

npm install --save qrcode

or, install it globally to use qrcode from the command line to save qrcode images or generate ones you can view in your terminal.

npm install -g qrcode

Usage

CLI

Usage: qrcode [options] <input string>

QR Code options:
  -v, --qversion  QR Code symbol version (1 - 40)                       [number]
  -e, --error     Error correction level           [choices: "L", "M", "Q", "H"]
  -m, --mask      Mask pattern (0 - 7)                                  [number]

Renderer options:
  -t, --type        Output type                  [choices: "png", "svg", "utf8"]
  -w, --width       Image width (px)                                    [number]
  -s, --scale       Scale factor                                        [number]
  -q, --qzone       Quiet zone size                                     [number]
  -l, --lightcolor  Light RGBA hex color
  -d, --darkcolor   Dark RGBA hex color
  --small  Output smaller QR code to terminal                          [boolean]

Options:
  -o, --output  Output file
  -h, --help    Show help                                              [boolean]
  --version     Show version number                                    [boolean]

Examples:
  qrcode "some text"                    Draw in terminal window
  qrcode -o out.png "some text"         Save as png image
  qrcode -d F00 -o out.png "some text"  Use red as foreground color

If not specified, output type is guessed from file extension.
Recognized extensions are png, svg and txt.

Browser

node-qrcode can be used in browser through module bundlers like Browserify and Webpack or by including the precompiled bundle present in build/ folder.

Module bundlers

<!-- index.html -->
<html>
  <body>
    <canvas id="canvas"></canvas>
    <script src="bundle.js"></script>
  </body>
</html>

// index.js -> bundle.js
var QRCode = require('qrcode')
var canvas = document.getElementById('canvas')

QRCode.toCanvas(canvas, 'sample text', function (error) {
  if (error) console.error(error)
  console.log('success!');
})

Precompiled bundle

<canvas id="canvas"></canvas>

<script src="/build/qrcode.js"></script>
<script>
  QRCode.toCanvas(document.getElementById('canvas'), 'sample text', function (error) {
    if (error) console.error(error)
    console.log('success!');
  })
</script>

If you install through npm, precompiled files will be available in node_modules/qrcode/build/ folder.

The precompiled bundle have support for Internet Explorer 10+, Safari 5.1+, and all evergreen browsers.

NodeJS

Require the module qrcode

var QRCode = require('qrcode')

QRCode.toDataURL('I am a pony!', function (err, url) {
  console.log(url)
})

render a qrcode for the terminal

var QRCode = require('qrcode')

QRCode.toString('I am a pony!',{type:'terminal'}, function (err, url) {
  console.log(url)
})

ES6/ES7

Promises and Async/Await can be used in place of callback function.

import QRCode from 'qrcode'

// With promises
QRCode.toDataURL('I am a pony!')
  .then(url => {
    console.log(url)
  })
  .catch(err => {
    console.error(err)
  })

// With async/await
const generateQR = async text => {
  try {
    console.log(await QRCode.toDataURL(text))
  } catch (err) {
    console.error(err)
  }
}

Error correction level

Error correction capability allows to successfully scan a QR Code even if the symbol is dirty or damaged. Four levels are available to choose according to the operating environment.

Higher levels offer a better error resistance but reduce the symbol's capacity.
If the chances that the QR Code symbol may be corrupted are low (for example if it is showed through a monitor) is possible to safely use a low error level such as Low or Medium.

Possible levels are shown below:

Level	Error resistance
L (Low)	~7%
M (Medium)	~15%
Q (Quartile)	~25%
H (High)	~30%

The percentage indicates the maximum amount of damaged surface after which the symbol becomes unreadable.

Error level can be set through options.errorCorrectionLevel property.
If not specified, the default value is M.

QRCode.toDataURL('some text', { errorCorrectionLevel: 'H' }, function (err, url) {
  console.log(url)
})

QR Code capacity

Capacity depends on symbol version and error correction level. Also encoding modes may influence the amount of storable data.

The QR Code versions range from version 1 to version 40.
Each version has a different number of modules (black and white dots), which define the symbol's size. For version 1 they are 21x21, for version 2 25x25 e so on. Higher is the version, more are the storable data, and of course bigger will be the QR Code symbol.

The table below shows the maximum number of storable characters in each encoding mode and for each error correction level.

Mode	L	M	Q	H
Numeric	7089	5596	3993	3057
Alphanumeric	4296	3391	2420	1852
Byte	2953	2331	1663	1273
Kanji	1817	1435	1024	784

Note: Maximum characters number can be different when using Mixed modes.

QR Code version can be set through options.version property.
If no version is specified, the more suitable value will be used. Unless a specific version is required, this option is not needed.

QRCode.toDataURL('some text', { version: 2 }, function (err, url) {
  console.log(url)
})

Encoding modes

Modes can be used to encode a string in a more efficient way.
A mode may be more suitable than others depending on the string content. A list of supported modes are shown in the table below:

Mode	Characters	Compression
Numeric	0, 1, 2, 3, 4, 5, 6, 7, 8, 9	3 characters are represented by 10 bits
Alphanumeric	0–9, A–Z (upper-case only), space, $, %, *, +, -, ., /, :	2 characters are represented by 11 bits
Kanji	Characters from the Shift JIS system based on JIS X 0208	2 kanji are represented by 13 bits
Byte	Characters from the ISO/IEC 8859-1 character set	Each characters are represented by 8 bits

Choose the right mode may be tricky if the input text is unknown.
In these cases Byte mode is the best choice since all characters can be encoded with it. (See Multibyte characters)
However, if the QR Code reader supports mixed modes, using Auto mode may produce better results.

Mixed modes

Mixed modes are also possible. A QR code can be generated from a series of segments having different encoding modes to optimize the data compression.
However, switching from a mode to another has a cost which may lead to a worst result if it's not taken into account. See Manual mode for an example of how to specify segments with different encoding modes.

Auto mode

By default, automatic mode selection is used.
The input string is automatically splitted in various segments optimized to produce the shortest possible bitstream using mixed modes.
This is the preferred way to generate the QR Code.

For example, the string ABCDE12345678?A1A will be splitted in 3 segments with the following modes:

Segment	Mode
ABCDE	Alphanumeric
12345678	Numeric
?A1A	Byte

Any other combinations of segments and modes will result in a longer bitstream.
If you need to keep the QR Code size small, this mode will produce the best results.

Manual mode

If auto mode doesn't work for you or you have specific needs, is also possible to manually specify each segment with the relative mode. In this way no segment optimizations will be applied under the hood.
Segments list can be passed as an array of object:

  var QRCode = require('qrcode')

  var segs = [
    { data: 'ABCDEFG', mode: 'alphanumeric' },
    { data: '0123456', mode: 'numeric' }
  ]

  QRCode.toDataURL(segs, function (err, url) {
    console.log(url)
  })

Kanji mode

With kanji mode is possible to encode characters from the Shift JIS system in an optimized way.
Unfortunately, there isn't a way to calculate a Shifted JIS values from, for example, a character encoded in UTF-8, for this reason a conversion table from the input characters to the SJIS values is needed.
This table is not included by default in the bundle to keep the size as small as possible.

If your application requires kanji support, you will need to pass a function that will take care of converting the input characters to appropriate values.

An helper method is provided by the lib through an optional file that you can include as shown in the example below.

Note: Support for Kanji mode is only needed if you want to benefit of the data compression, otherwise is still possible to encode kanji using Byte mode (See Multibyte characters).

  var QRCode = require('qrcode')
  var toSJIS = require('qrcode/helper/to-sjis')

  QRCode.toDataURL(kanjiString, { toSJISFunc: toSJIS }, function (err, url) {
    console.log(url)
  })

With precompiled bundle:

<canvas id="canvas"></canvas>

<script src="/build/qrcode.min.js"></script>
<script src="/build/qrcode.tosjis.min.js"></script>
<script>
  QRCode.toCanvas(document.getElementById('canvas'),
    'sample text', { toSJISFunc: QRCode.toSJIS }, function (error) {
    if (error) console.error(error)
    console.log('success!')
  })
</script>

Binary data

QR Codes can hold arbitrary byte-based binary data. If you attempt to create a binary QR Code by first converting the data to a JavaScript string, it will fail to encode propery because string encoding adds additional bytes. Instead, you must pass a Uint8ClampedArray or compatible array, or a Node Buffer, as follows:

// Regular array example
// WARNING: Element values will be clamped to 0-255 even if your data contains higher values.
const QRCode = require('qrcode')
QRCode.toFile(
  'foo.png',
  [{ data: [253,254,255], mode: 'byte' }],
  ...options...,
  ...callback...
)

// Uint8ClampedArray example
const QRCode = require('qrcode')

QRCode.toFile(
  'foo.png',
  [{ data: new Uint8ClampedArray([253,254,255]), mode: 'byte' }],
  ...options...,
  ...callback...
)

// Node Buffer example
// WARNING: Element values will be clamped to 0-255 even if your data contains higher values.
const QRCode = require('qrcode')

QRCode.toFile(
  'foo.png',
  [{ data: Buffer.from([253,254,255]), mode: 'byte' }],
  ...options...,
  ...callback...
)

TypeScript users: if you are using @types/qrcode, you will need to add a // @ts-ignore above the data segment because it expects data: string.

Multibyte characters

Support for multibyte characters isn't present in the initial QR Code standard, but is possible to encode UTF-8 characters in Byte mode.

QR Codes provide a way to specify a different type of character set through ECI (Extended Channel Interpretation), but it's not fully implemented in this lib yet.

Most QR Code readers, however, are able to recognize multibyte characters even without ECI.

Note that a single Kanji/Kana or Emoji can take up to 4 bytes.

API

Browser:

create()
toCanvas()
toDataURL()
toString()

Server:

create()
toCanvas()
toDataURL()
toString()
toFile()
toFileStream()

Browser API

`create(text, [options])`

Creates QR Code symbol and returns a qrcode object.

`text`

Type: String|Array

Text to encode or a list of objects describing segments.

`options`

See QR Code options.

`returns`

Type: Object

// QRCode object
{
  modules,              // Bitmatrix class with modules data
  version,              // Calculated QR Code version
  errorCorrectionLevel, // Error Correction Level
  maskPattern,          // Calculated Mask pattern
  segments              // Generated segments
}

`toCanvas(canvasElement, text, [options], [cb(error)])`

`toCanvas(text, [options], [cb(error, canvas)])`

Draws qr code symbol to canvas.
If canvasElement is omitted a new canvas is returned.

`canvasElement`

Type: DOMElement

Canvas where to draw QR Code.

`text`

Type: String|Array

Text to encode or a list of objects describing segments.

`options`

See Options.

`cb`

Type: Function

Callback function called on finish.

Example

QRCode.toCanvas('text', { errorCorrectionLevel: 'H' }, function (err, canvas) {
  if (err) throw err

  var container = document.getElementById('container')
  container.appendChild(canvas)
})

`toDataURL(text, [options], [cb(error, url)])`

`toDataURL(canvasElement, text, [options], [cb(error, url)])`

Returns a Data URI containing a representation of the QR Code image.
If provided, canvasElement will be used as canvas to generate the data URI.

`canvasElement`

Type: DOMElement

Canvas where to draw QR Code.

`text`

Type: String|Array

Text to encode or a list of objects describing segments.

`options`

type

Type: String
Default: image/png

Data URI format.
Possible values are: image/png, image/jpeg, image/webp.
rendererOpts.quality

Type: Number
Default: 0.92

A Number between 0 and 1 indicating image quality if the requested type is image/jpeg or image/webp.

See Options for other settings.

`cb`

Type: Function

Callback function called on finish.

Example

var opts = {
  errorCorrectionLevel: 'H',
  type: 'image/jpeg',
  quality: 0.3,
  margin: 1,
  color: {
    dark:"#010599FF",
    light:"#FFBF60FF"
  }
}

QRCode.toDataURL('text', opts, function (err, url) {
  if (err) throw err

  var img = document.getElementById('image')
  img.src = url
})

`toString(text, [options], [cb(error, string)])`

Returns a string representation of the QR Code.

`text`

Type: String|Array

Text to encode or a list of objects describing segments.

`options`

type

Type: String
Default: utf8

Output format.
Possible values are: terminal,utf8, and svg.

See Options for other settings.

`cb`

Type: Function

Callback function called on finish.

Example

QRCode.toString('http://www.google.com', function (err, string) {
  if (err) throw err
  console.log(string)
})

Server API

`create(text, [options])`

See create.

`toCanvas(canvas, text, [options], [cb(error)])`

Draws qr code symbol to node canvas.

`text`

Type: String|Array

Text to encode or a list of objects describing segments.

`options`

See Options.

`cb`

Type: Function

Callback function called on finish.

`toDataURL(text, [options], [cb(error, url)])`

Returns a Data URI containing a representation of the QR Code image.
Only works with image/png type for now.

`text`

Type: String|Array

Text to encode or a list of objects describing segments.

`options`

See Options for other settings.

`cb`

Type: Function

Callback function called on finish.

`toString(text, [options], [cb(error, string)])`

Returns a string representation of the QR Code.
If choosen output format is svg it will returns a string containing xml code.

`text`

Type: String|Array

Text to encode or a list of objects describing segments.

`options`

type

Type: String
Default: utf8

Output format.
Possible values are: utf8, svg, terminal.

See Options for other settings.

`cb`

Type: Function

Callback function called on finish.

Example

QRCode.toString('http://www.google.com', function (err, string) {
  if (err) throw err
  console.log(string)
})

`toFile(path, text, [options], [cb(error)])`

Saves QR Code to image file.
If options.type is not specified, the format will be guessed from file extension.
Recognized extensions are png, svg, txt.

`path`

Type: String

Path where to save the file.

`text`

Type: String|Array

Text to encode or a list of objects describing segments.

`options`

type

Type: String
Default: png

Output format.
Possible values are: png, svg, utf8.
rendererOpts.deflateLevel (png only)

Type: Number
Default: 9

Compression level for deflate.
rendererOpts.deflateStrategy (png only)

Type: Number
Default: 3

Compression strategy for deflate.

See Options for other settings.

`cb`

Type: Function

Callback function called on finish.

Example

QRCode.toFile('path/to/filename.png', 'Some text', {
  color: {
    dark: '#00F',  // Blue dots
    light: '#0000' // Transparent background
  }
}, function (err) {
  if (err) throw err
  console.log('done')
})

`toFileStream(stream, text, [options])`

Writes QR Code image to stream. Only works with png format for now.

`stream`

Type: stream.Writable

Node stream.

`text`

Type: String|Array

Text to encode or a list of objects describing segments.

`options`

See Options.

Options

QR Code options

`version`

Type: Number

QR Code version. If not specified the more suitable value will be calculated.

`errorCorrectionLevel`

Type: String
Default: M

Error correction level.
Possible values are low, medium, quartile, high or L, M, Q, H.

`maskPattern`

Type: Number

Mask pattern used to mask the symbol.
Possible values are 0, 1, 2, 3, 4, 5, 6, 7.
If not specified the more suitable value will be calculated.

`toSJISFunc`

Type: Function

Helper function used internally to convert a kanji to its Shift JIS value.
Provide this function if you need support for Kanji mode.

Renderers options

`margin`

Type: Number
Default: 4

Define how much wide the quiet zone should be.

`scale`

Type: Number
Default: 4

Scale factor. A value of 1 means 1px per modules (black dots).

`small`

Type: Boolean
Default: false

Relevant only for terminal renderer. Outputs smaller QR code.

`width`

Type: Number

Forces a specific width for the output image.
If width is too small to contain the qr symbol, this option will be ignored.
Takes precedence over scale.

`color.dark`

Type: String
Default: #000000ff

Color of dark module. Value must be in hex format (RGBA).
Note: dark color should always be darker than color.light.

`color.light`

Type: String
Default: #ffffffff

Color of light module. Value must be in hex format (RGBA).

GS1 QR Codes

There was a real good discussion here about them. but in short any qrcode generator will make gs1 compatible qrcodes, but what defines a gs1 qrcode is a header with metadata that describes your gs1 information.

https://github.com/soldair/node-qrcode/issues/45

Credits

This lib is based on "QRCode for JavaScript" which Kazuhiko Arase thankfully MIT licensed.

License

MIT

The word "QR Code" is registered trademark of:
DENSO WAVE INCORPORATED

Comments

Using the lib from node, browser methods still being called.
Hello!

I've been trying to use the lib from node.js and I was under the impression that making method calls from node.js would use the functions in server.js but I keep getting this error where the lib complains about a canvasElement being required, which, from looking at the souce code, I think it's only a requirement of the browser lib. I also digged the code expecting to find where a fallback to the broser code would happen but I wasn't able to see such fallback anywhere.

Any help is greatly appreciated :)

Cheers!

var QRCode = require("qrcode") QRCode.toDataURL("test", {type: "png"}, function(err, url) { console.log(err) // Error: You need to specify a canvas element console.log(url) // undefined })

Full disclosure: I'm not simply using it from node, but on a react-native project; this is because I haven't been able to find a good RN solution to create QRCodes that actually passes builds and/or is maintained. If this lib can't be used at all from RN I'd be most thankful if you could point me in the right direction.
opened by poifox 24
Refactor/core

This is the first part of the refactor proposed in #56. It is focused on lib structure and reorganization of core files.

The initial qrcode.js file has been splitted in many separated modules to make code easier to follow and update. Some parts have been reimplemented and where possible some optimisations have been added to make the qrcode generation faster. Also, I tried to comment and document as much as possible the code to explain what it does.

For each core module has been added an initial test file which cover the implementation. More tests should be added in future to cover possible edge cases.

Example files have been moved to a dedicated folder and all files not needed have been excluded from publishing to have a cleaner package.

opened by vigreco 13
Add Image Inside of QRcode?

I have figured out how to customize colors of a QRcode

let url = await QRCode.toDataURL(new_card.data, { color: { dark: '#000000', // black dots light: '#ffffff' // white background } })

Can I add images as well to the QRcode? Say I wanted to place my companies logo right in the middle of the QRcode... Thanks!

opened by Craig-Burch 12
Avoid dependency on Buffer

This patch replaces the usage of Buffer with plain Uint8Arrays.

Technically, this is a breaking change for browsers that don't support Uint8Array, but the support have been there for a long time:

Personally, I would recommend anyone wanting to support IE 9 to use a polyfill, instead of us including workarounds in this package. But I'm happy to hear other opinions ☺️

opened by LinusU 11

Having an issue installing it?

npm install --save node-qrcode

It hangs(?) on the loading webDrivers step.

npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
npm WARN deprecated [email protected]: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^4.0.0.

> [email protected] install /Users/rstudner/projects/auth-api/node_modules/node-browser
> node ./build.js

load: download webDrivers...

opened by rstudner 11

ansi-regex dependency causes audit warning

One of the repos dependencies is currently causing moderate warnings on npm audit.

The dependency chain is as follows:

qrcode -> yargs -> cliui -> string-width -> strip-ansi -> ansi-regex

A patch has been made for ansi-regix (see https://github.com/advisories/GHSA-93q8-gq69-wqmw) but I'm not sure about the parents in the dependency tree.

Any chance of checking for a yargs update/patch that might solve this issue?

opened by lancce21 8
Possible encoding bug with binary data
Thanks for the great library! I think I encountered a bug, or maybe just a point of clarity:

It looks like QRCode.toFile expects only string data. Likewise, the TypeScript definitions support this. Even a segment expects string data.

For my use case, I have a Buffer of gzipped data, so it's binary. Converting it using Buffer.toString() won't work because it creates additional bytes due to whatever string encoding I choose. Internally, when the library converts it back to a Buffer for processing, it is altered.

I noticed that it actually will work to pass a buffer in as a segment like {data: someBuf, mode: 'byte'}, but the instructions and the TypeScript definitions don't actually support that.

Does not work:

const data = Buffer.from([255,255,255]) QRCode.toFile( 'foo.png', data.toString('utf8'), ...options..., ...callback... )

Does work:

const data = Buffer.from([255,255,255]) QRCode.toFile( 'foo.png', [{ data, mode: 'byte' }], ...options..., ...callback... )

Maybe I'm just not thinking clearly, but it seems that non-string data such as byte arrays and buffers should be 1st class citizens. If you agree, I'd be open to discussing a PR and shooting something over.
opened by benallfree 8
toDataURL doesn't work in IE9

toDataURL doesn't work in IE9. when I use it in IE9, the browser tell us that 'the object doesn't support “write”attributes or method'.Please check this problem.

opened by chenjigeng 8
Add BufferCanvas to remove node-canvas

Hello there I used this module to my project and works perfectly for Mac. but Its too hard to run on Windows. Someone noticed too.

Because of the deep dependency, qrcode is too hard to use. qrcode's dependency: qrcode -> node-canvas -> node -> Cairo -> x11.

https://github.com/imsobear/node-qrcode

I wrote the code Canvas alternative class to remove node-canvas and it's working. BufferCanvas implements few interfaces from Canvas API used in node-qrcode. It provides a pure JS way to render rectangles. What do you think about this?

opened by ryohey 8
Refactor proposal and possible future enhancements
I open this issue to discuss about a possible re-factor of the lib.

The main reason that led me to propose this is because I found quite hard right now add tests or new functionalities to the lib in a clean way.

I started adding unit tests in my local branch but it's hard to follow what tests are actually testing.

I've also some ideas (mostly regarding the rendering part) that I would like to share and see implemented here but since most of the logic and rendering part is all contained in a couple of files, add new code there will lead at some point to more confusion and to a code harder to manage.

So, I propose these change:

Split qrcode.js file in smaller modules

Having small, simple modules each with its own task, will make much easier add tests, documentation and new functionalities to them, and will make code easier to follow. Add support for other qrcode types would be also easier.

Remove duplicated code and organize renderers

Currently, most of the code that is used to draw the qrcode is duplicated across various functions and it's hard to test. A more 'composable' structure could help to organize the various renderers. We could have a base-renderer class that will contains all the common methods and then a list of possible renderer.

The file structure so far could be something like:

lib/ core/ 8bit-byte.js alignment-pattern.js bit-buffer.js ecc.js finder-pattern.js mask-pattern.js math.js modes.js polynomial.js rs-blocks.js utils.js version.js renderer/ base-renderer.js png-renderer.js jpg-renderer.js svg-renderer.js pdf-renderer.js canvas-renderer.js terminal-renderer.js qrcode.js

Add linter and code coverage

Since one of the main reason of this refactor is to promote the add of tests, having code coverage would also be helpful. Also, enforcing code style with a linter will prevent common bugs and style inconsistency across files. I would suggest eslint with something like Standard JS.

(Future work) Remove node-canvas in place of image libs

I think node-canvas is a bit overkill if used to just export images. Renderer like png-renderer.js and jpg-renderer.js could take advantages of dedicated image libs like pngjs and jpeg-js

(Future work) Completely decouple logic from render

Currently the qrcode.js lib, takes care of generating the qrcode data and rendering it as an array of bit representing each modules. This array is then used to draw the qrcode and export it as image. This works perfectly fine, but I would like to abstract a little more this process and split the drawing methods in smaller parts.

The idea is to move all the function that do something related to how to render in (for example) base-renderer.js and let core library to just produce information (such as coords) about what and where to render. base-renderer would have dedicated functions to render for example: qrcode background, finding pattern, alignment pattern, each single modules ecc. These functions could be then extended/overriden to add support for effects, such as colors or deformations to allow qrcode customization (like this)

(Future work) Add support for promise

I think Promises support would also be a good addition to the lib.

What do you think?
opened by vigreco 8
Draw QR in Internet Explorer (IE7)

Hi there,

Did anybody get this script working in Internet Explorer 7?

I did find the Google Excanvas javascript to make it possible showing/generating Canvas elements in Internet Explorer. For much QR drawing programs it works but not for this one; or does anybody else have the solution for me?

Thank you in advance,

Bas

opened by bheijns 8
Multiple qr codes on page for bulk printing

Hi, thank you for this work, it's beautiful!

I'm have a problem where all the codes scan to the same value. It feels like a problem with a closure, but I've done what I can to create new copy of the styling component...

let options = { width: 200, height: 200, type: 'svg' } let range = [...Array(count).keys()] range.forEach(labCtr => { console.log(labels[labCtr]) const labelData = JSON.parse(JSON.stringify( labels[labCtr] )) let optionsEach = Object.assign(options, {data: labelData}) let qrCode = new QRCodeStyling(optionsEach) const el = document.getElementById('label' + labCtr) qrCode.append(el) })

opened by jimmack1963 0
【React】Cannot read properties of undefined (reading 'getContext')

I am using the npm package QRCode in React framework and I get this error:

Cannot read properties of undefined (reading 'getContext')

how can i fix it??

opened by weiwentao518 3
Add some missing SJIS characters

Some characters commonly used in Japanese did not appear in the SJIS_UTF8 table. So I added some missing characters.

I referred to the following URLs. http://ash.jp/code/unitbl21.htm https://seiai.ed.jp/sys/text/java/shiftjis_table.html

opened by formalism 0
toFileStream doesn't seem to emit finish event when writing is done
I've implemented a usage of qrcode.toFileStream in Node 16:

let qrCodeStream = new stream.PassThrough(); qrcode.toFileStream(qrCodeStream, "Hello world"); let headers = new Headers({ "Content-Type": "image/png", }); return new Promise((resolve) => { setTimeout(() => { resolve( new Response(qrCodeStream.read(), { status: 200, headers, }) ); }, 1000); });

As you can see above, I'm having to use a setTimeout with an arbitrary delay in order to get a proper response. This is because the ideal alternative (using the finish event of Writable, which PassThrough implements) doesn't work.

Not sure if this is due to something in this repository or a dependency like pngjs.
opened by tcschiller 0

Owner

Ryan Day

GitHub

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —

p5.js Welcome! ?? ???????????????????? p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for a

18.6k Jan 1, 2023

HTML5 Canvas Gauge. Tiny implementation of highly configurable gauge using pure JavaScript and HTML5 canvas. No dependencies. Suitable for IoT devices because of minimum code base.

HTML Canvas Gauges v2.1 Installation Documentation Add-Ons Special Thanks License This is tiny implementation of highly configurable gauge using pure

1.5k Dec 30, 2022

Leon Sans is a geometric sans-serif typeface made with code in 2019 by Jongmin Kim.

Leon Sans Leon Sans is a geometric sans-serif typeface made with code in 2019 by Jongmin Kim. It allows to change font weight dynamically and to creat

10.1k Jan 2, 2023

Chart image and QR code web API

QuickChart QuickChart is a service that generates images of charts from a URL. Because these charts are simple images, they are very easy to embed in

1.3k Dec 25, 2022

A repostory of samples, which demonstrates, how to use the 'Power Tools' extension for Visual Studio Code.

vscode-powertools-samples A repository of samples, which demonstrates, how to use the Power Tools extension for Visual Studio Code. Apps data-url-conv

7 Feb 3, 2022

The code base that powered India in Pixels' YouTube channel for more than 2 years - now open sourced for you to use on your own projects

India in Pixels Bar Chart Racing For over two years, this nifty code base powered India in Pixels' YouTube channel with videos fetching over millions

141 Dec 4, 2022

a babel plugin that can transform generator function to state machine, which is a ported version of typescript generator transform

Babel Plugin Lite Regenerator intro This babel plugin is a ported version of TypeScript generator transform. It can transform async and generator func

6 Jul 8, 2022

Types generator will help user to create TS types from JSON. Just paste your single object JSON the Types generator will auto-generate the interfaces for you. You can give a name for the root object

Types generator Types generator is a utility tool that will help User to create TS Interfaces from JSON. All you have to do is paste your single objec

16 Dec 6, 2022

A quickstart AWS Lambda function code generator. Downloads a template function code file, test harness file, sample SAM deffiniation and appropriate file structure.

Welcome to function-stencil ?? A quickstart AWS Lambda function code generator. Downloads a template function code file, test harness file, sample SAM

21 Jun 20, 2022

qr code generator

node-qrcode QR code/2d barcode generator. Highlights Installation Usage Error correction level QR Code capacity Encoding Modes Binary data Multibyte c

6.3k Jan 4, 2023

📖 Contenerised documentation generator from in-code comments for CLIPS (inspired by JavaDoc)

clips-doc Installation Download the clips-doc.docker.tar Docker image. You will need docker to proceed. docker load --input clips-doc.docker.tar Image

2 Apr 18, 2022

HTML5 CSS3 vanilla js QR code generator with download options

QR Code Generator HTML5 CSS3 vanilla js QR code generator with download options Additional description about the project and its features. Built With

2 May 13, 2022

🎨ansi escape code generator to help make colorful command line tools

ansicodes ?? ansi escape code generator to help make colorful command line tools i got tired of looking up ansi code tables when writing command line

53 Dec 17, 2022

High-quality QR Code generator library in Java, TypeScript/JavaScript, Python, Rust, C++, C.

QR Code generator library Introduction This project aims to be the best, clearest QR Code generator library in multiple languages. The primary goals a

3.3k Jan 4, 2023

A VS Code extension to practice and improve your typing speed right inside your code editor. Practice with simple words or code snippets.

Warm Up ?? ??‍?? A VS Code extension to practice and improve your typing speed right inside your code editor. Practice with simple words or code snipp

34 Dec 12, 2022

qr code generator

Related tags

Overview

node-qrcode

Highlights

Installation

Usage

CLI

Browser

Module bundlers

Precompiled bundle

NodeJS

ES6/ES7

Error correction level

QR Code capacity

Encoding modes

Mixed modes

Auto mode

Manual mode

Kanji mode

Binary data

Multibyte characters

API

Browser API

create(text, [options])

text

options

returns

toCanvas(canvasElement, text, [options], [cb(error)])

toCanvas(text, [options], [cb(error, canvas)])

canvasElement

text

options

cb

Example

toDataURL(text, [options], [cb(error, url)])

toDataURL(canvasElement, text, [options], [cb(error, url)])

canvasElement

text

options

type

rendererOpts.quality

cb

Example

toString(text, [options], [cb(error, string)])

text

options

type

cb

Example

Server API

create(text, [options])

toCanvas(canvas, text, [options], [cb(error)])

text

options

cb

toDataURL(text, [options], [cb(error, url)])

text

options

cb

toString(text, [options], [cb(error, string)])

text

options

type

cb

Example

toFile(path, text, [options], [cb(error)])

path

text

options

type

rendererOpts.deflateLevel (png only)

rendererOpts.deflateStrategy (png only)

cb

Example

toFileStream(stream, text, [options])

stream

text

options

Options

`create(text, [options])`

`text`

`options`

`returns`

`toCanvas(canvasElement, text, [options], [cb(error)])`

`toCanvas(text, [options], [cb(error, canvas)])`

`canvasElement`

`text`

`options`

`cb`

`toDataURL(text, [options], [cb(error, url)])`

`toDataURL(canvasElement, text, [options], [cb(error, url)])`

`canvasElement`

`text`

`options`

`type`

`rendererOpts.quality`

`cb`

`toString(text, [options], [cb(error, string)])`

`text`

`options`

`type`

`cb`

`create(text, [options])`

`toCanvas(canvas, text, [options], [cb(error)])`

`text`

`options`

`cb`

`toDataURL(text, [options], [cb(error, url)])`

`text`

`options`

`cb`

`toString(text, [options], [cb(error, string)])`

`text`

`options`

`type`

`cb`

`toFile(path, text, [options], [cb(error)])`

`path`

`text`

`options`

`type`

`rendererOpts.deflateLevel` (png only)

`rendererOpts.deflateStrategy` (png only)

`cb`

`toFileStream(stream, text, [options])`

`stream`

`text`

`options`

`version`

`errorCorrectionLevel`

`maskPattern`

`toSJISFunc`

`margin`

`scale`

`small`

`width`

`color.dark`

`color.light`