isabella232 / angular-qrcode

QR codes for Angular – used by:

This repo is a fork of monospaced/angular-qrcode which supports colorization of the QR code.

Note: color changes often negatively effect QR code scannability – it's typically a bad idea to use a none-white background, or a foreground color which varies significantly from black.

Angular QR Code

<qrcode></qrcode>

An AngularJS directive to creates QR Codes using Kazuhiko Arase’s qrcode-generator library.

See it in action.

Important!

The version and error-correction-level parameters are very important.

The selected version and error-correction-level must give a high enough capacity for the amount of data (bits) you are encoding, or the qrcode will not render.

For more information see http://www.qrcode.com/en/about/version.html.

Usage

as element

<qrcode data="string"></qrcode>

with QR options

<qrcode version="2" error-correction-level="M" size="200" data="string" color="#222" background="#f7f7f7"></qrcode>

as a downloadable image

<qrcode data="string" download></qrcode>

as a link to URL

<qrcode data="http://example.com" href="http://example.com"></qrcode>

download and href can’t be used on the same element (if download is present, href will be ignored)

with expressions, observe changes

<qrcode version="{{version}}" error-correction-level="{{level}}" size="{{size}}" data="{{var}}" href="{{var}}" download></qrcode>

Options

Permitted values

• version: 1-40

• error-correction-level: 'L', 'M', 'Q', 'H'

• size: integer

• download: boolean

• href: URL

• color: hexadecimal color (default: #000)

• background: hexadecimal color (default: #FFF)

The amount of data (measured in bits) must be within capacity according to the selected version and error correction level, see http://www.qrcode.com/en/about/version.html.

Install

bower install monospaced/angular-qrcode

npm install angular-qrcode

Include the qrcode generator library and the angular-qrcode.js script provided by this component in your app, and add monospaced.qrcode to your app’s dependencies.

Demo

monospaced.github.io/angular-qrcode

Reference

QR Code versions

QR Code error correction