QRCoder

QRCoder is a pure browser qrcode generation which is standalone. It is based on a library which build qrcode in various language.

install

npm install qrcoder --save

Example

default

import QRCoder from 'qrcoder'

const qr = new QRCoder({
  data: 'Hi!'
});

// data:image/gif;base64,R0lGODdhUgBS...WQBADs=
const dataURL = qr.getDataURL()

// <img src="data:image/gif;base64,R0lGODdhUgBS...WQBADs=" width="82" height="82"/>
const imgTag = qr.createImgTag()

document.getElementById('placeHolder').innerHTML = imgTag;

specify size

import QRCoder from 'qrcoder'

// want to create a qrcode image, which size is 101px
// QRCoder will create a qrcode image to fit this size,
// it try to calc a size which is close to this size,
// but no guarantee to equal it.
// you can use getSize function to get the real size.
// size = moduleCount * cellSize + margin * 2
// in this case, the real size is 100
const qrcoder = new QRCoder({
  data: 'Hi!',
  size: 101
})

// data:image/gif;base64,R0lG...pAoUAAA7
const dataURL = qr.getDataURL()

// <img src="data:image/gif;base64,R0lG...pAoUAAA7" width="100" height="100"/>"
const imgTag = qr.createImgTag()

const size = qrcoder.getSize()  // 100
const cellSize = qrcoder.getCellSize()  // 4
const margin = qrcoder.getMargin()  // 8
const moduleCount = qrcoder.getModuleCount() // 21

document.getElementById('placeHolder').innerHTML = imgTag;

more options

import QRCoder from 'qrcoder'

// if specify cellSize or margin or both of them, size will be ignore.
const qr = new QRCoder({
  typeNumber: 4,
  errorCorrectionLevel: 'L',
  mode: 'Byte',
  cellSize: 2,
  margin: 8,
  size: 101,
  alt: '',
  data: 'Hi!'
});

// data:image/gif;base64,R0lGODdhUgBS...WQBADs=
const dataURL = qr.getDataURL()

// <img src="data:image/gif;base64,R0lGODdhUgBS...WQBADs=" width="82" height="82"/>
const imgTag = qr.createImgTag()

document.getElementById('placeHolder').innerHTML = imgTag;

native

import QRCoder from 'qrcoder'

const typeNumber = 4
const errorCorrectionLevel = 'L'
const qr = new QRCoder({
  typeNumber,
  errorCorrectionLevel
})
qr.addData('Hi!')
qr.make()
document.getElementById('placeHolder').innerHTML = qr.createImgTag()

API Documentation

QRCoder Class

QRCoder(options) => QRCoder

Create a QRCoder Object.

| Param | Type | Description | | ---------------------| ------------------- | ------------------------------------------- | | options | object | options Object

Default options

| Param | Type | Description | | ---------------------| ------------------- | ------------------------------------------- | | options.typeNumber | number | default: 4 | options.errorCorrectionLevel | string | default: 'L' | options.mode | string | default: 'Byte' | options.cellSize | number | default: 2 | options.margin | number | default: 8 | options.size | number | default: undefined | options.data | string | default: undefined | options.alt | string | default: ''

QRCoder.stringToBytes(s) : number[]

Encodes a string into an array of number(byte) using any charset. This function is used by internal. Overwrite this function to encode using a multibyte charset.

| Param | Type | Description | | -------| ------------------- | ---------------- | | s | string | string to encode |

QRCoder

addData(data, mode) => void

Add a data to encode.

| Param | Type | Description | | -------| ------------------- | ---------------------------------------------------------- | | data | string | string to encode | | mode | string | Mode ('Numeric', 'Alphanumeric', 'Byte'(default), 'Kanji') |

make() => void

Make a QR Code.

getModuleCount() => number

The number of modules(cells) for each orientation. [Note] call make() before this function.

getSize() => number

The size of the qrcode image.

getCellSize() => number

The number of the qrcode's cell.

getMargin() => number

The number of the qrcode image's margin.

isDark(row, col) => boolean

The module at row and col is dark or not. [Note] call make() before this function.

| Param | Type | Description | | ------| ------------------- | ------------------- | | row | number | 0 ~ moduleCount - 1 | | col | number | 0 ~ moduleCount - 1 |

getDataURL() => string

createImgTag() => string

createSvgTag() => string

createTableTag() => string

Helper functions for HTML.

License

MIT