Package Exports

qr-code-styling

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (qr-code-styling) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

QR Code Styling

JavaScript library for generating QR codes with a logo and styling.

If you have issues / suggestions / notes / questions, please open an issue or contact me. Let's create a usable library together.

Examples

Installation

npm install qr-code-styling

Ussage

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QR Code Styling</title>
    <script type="text/javascript" src="https://unpkg.com/qr-code-styling/lib/qr-code-styling.js"></script>
</head>
<body>
<div id="canvas"></div>
<script type="text/javascript">

    const qrCode = new QRCodeStyling({
        width: 300,
        height: 300,
        data: "https://www.facebook.com/",
        image: "https://facebookbrand.com/wp-content/themes/fb-branding/assets/images/fb-logo.png?v2",
        dotsOptions: {
            color: "#4267b2",
            type: "rounded"
        },
        backgroundOptions: {
            color: "#e9ebee",
        }
    });

    qrCode.append(document.getElementById("canvas"));
</script>
</body>
</html>

API Documentation

QRCodeStyling instance

new QRCodeStyling(options) => QRCodeStyling

Param	Type	Description
options	object	Init object

options structure

Property	Type	Default Value	Description
width	number	`300`	Size of canvas
height	number	`300`	Size of canvas
data	string		The date will be encoded to the QR code
image	string		The image will be copied to the center of the QR code
qrOptions	object		Options will be passed to `qrcode-generator` lib
imageOptions	object		Specific image options, details see below
dotsOptions	object		Dots styling options
backgroundOptions	object		QR background styling options

options.qrOptions structure

Property	Type	Default Value
typeNumber	number (`0 - 40`)	`0`
mode	string (`'Numeric' 'Alphanumeric' 'Byte' 'Kanji'`)
errorCorrectionLevel	string (`'L' 'M' 'Q' 'H'`)	`'Q'`

options.imageOptions structure

Property	Type	Default Value	Description
hideBackgroundDots	boolean	`true`	Hide all dots covered by the image
imageSize	number	`0.4`	Coefficient of the image size. Not recommended to use ove 0.5. Lower is better
crossOrigin	string(`'anonymous' 'use-credentials'`)		Set "anonymous" if you want to download QR code from other origins.

options.dotsOptions structure

Property	Type	Default Value	Description
color	string	`'#000'`	Color of QR dots
type	string (`'rounded' 'dots' 'square'`)	`'default'`	Style of QR dots

options.backgroundOptions structure

Property	Type	Default Value
color	string	`'#fff'`

QRCodeStyling methods

QRCodeStyling.append(container) => void

Param	Type	Description
container	DOM element	This container will be used for appending of the QR code

QRCodeStyling.update(options) => void

Param	Type	Description
options	object	The same options as for initialization

QRCodeStyling.download(extension) => void

Param	Type	Default Value
extension	string (`'png' 'jpeg' 'webp'`)	`'png'`

qr-code-styling