Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

@mithrandirii/qr-code-styling

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@mithrandirii/qr-code-styling

Add a style and an image to your QR code

1.3.3
latest
Source
npm

Version published: 4 years ago

Maintainers: 1

Created: 4 years ago

Source

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://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg",
        dotsOptions: {
            color: "#4267b2",
            type: "rounded"
        },
        backgroundOptions: {
            color: "#e9ebee",
        },
        imageOptions: {
            crossOrigin: "anonymous"
        }
    });

    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(downloadOptions) => void

Param	Type	Description
downloadOptions	object	Options with extension and name of file (not required)

downloadOptions structure

Property	Type	Default Value	Description
name	string	`'qr'`	Name of the downloaded file
extension	string (`'png' 'jpeg' 'webp'`)	`'png'`	File extension

License

Keywords

FAQs

What is @mithrandirii/qr-code-styling?

Is @mithrandirii/qr-code-styling well maintained?

Package last updated on 15 Oct 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install