@aiddroid/qr-code-styling

v1.7.6

Published

4 months ago

Add a style and an image to your QR code

0High
0Medium
0Low

aiddroid

qr qrcode qr-code js qrjs qrstyling styling qrbranding branding qrimage image qrlogo logo design

QR Code Styling

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

Try it here https://bulk-qr.app

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

Examples

Installation

npm install qr-code-styling

Usage

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

    const qrCode = new QRCodeStyling({
        width: 300,
        height: 300,
        type: "svg",
        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",
            margin: 20
        },
        frameOptions: {
            image: "https://www.svgrepo.com/show/89640/circular-flowers-ornamental-frame.svg",
            crossOrigin: "anonymous",
            scale: 1,
            offsetX: 0,
            offsetY: 0,
            position: "top",
        },
    });

    qrCode.append(document.getElementById("canvas"));
    qrCode.download({ name: "qr", extension: "svg" });
</script>
</body>
</html>

React example (Codesandbox)

Angular example (Codesandbox)

React example (source)

Angular example (source)

Vue example (source)

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 | | type | string ('canvas' 'svg') | canvas | The type of the element that will be rendered | | 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 | | margin | number | 0 | Margin around canvas | | qrOptions | object | | Options will be passed to qrcode-generator lib | | imageOptions | object | | Specific image options, details see below | | dotsOptions | object | | Dots styling options | | cornersSquareOptions | object | | Square in the corners styling options | | cornersDotOptionsHelper | object | | Dots in the corners styling options | | backgroundOptions | object | | QR background styling options | | frameOptions | object | | QR frame 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 | | margin | number | 0 | Margin of the image in px | | 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 | | gradient | object | | Gradient of QR dots | | type | string ('rounded' 'dots' 'classy' 'classy-rounded' 'square' 'extra-rounded') | 'square' | Style of QR dots |

options.backgroundOptions structure

| Property | Type | Default Value | | -------- | ------ | ------------- | | color | string | '#fff' | | gradient | object |

options.frameOptions structure

| Property | Type | Default Value | Description | | ----------- | --------------------------------------- | ------------------------ | -------------------------------------------------------------------- | | image | string | '' | The image will be loaded as the QR code frame. | | crossOrigin | string('anonymous' 'use-credentials') | | Set "anonymous" if you want to download QR frame from other origins. | | scale | number | 1 | scale of the frame image size | | offsetX | number | 0 | offset on x axis | | offsetY | number | 0 | offset on y axis | | position | string | string('top' 'bottom') | The position of the frame layer |

options.cornersSquareOptions structure

| Property | Type | Default Value | Description | | -------- | ----------------------------------------- | ------------- | -------------------------- | | color | string | | Color of Corners Square | | gradient | object | | Gradient of Corners Square | | type | string ('dot' 'square' 'extra-rounded') | | Style of Corners Square |

options.cornersDotOptions structure

| Property | Type | Default Value | Description | | -------- | ------------------------- | ------------- | ----------------------- | | color | string | | Color of Corners Dot | | gradient | object | | Gradient of Corners Dot | | type | string ('dot' 'square') | | Style of Corners Dot |

Gradient structure

options.dotsOptions.gradient

options.backgroundOptions.gradient

options.cornersSquareOptions.gradient

options.cornersDotOptions.gradient

| Property | Type | Default Value | Description | | ---------- | ---------------------------- | ------------- | --------------------------------------------------------------------------------------- | | type | string ('linear' 'radial') | "linear" | Type of gradient spread | | rotation | number | 0 | Rotation of gradient in radians (Math.PI === 180 degrees) | | colorStops | array of objects | | Gradient colors. Example [{ offset: 0, color: 'blue' }, { offset: 1, color: 'red' }] |

Gradient colorStops structure

options.dotsOptions.gradient.colorStops[]

options.backgroundOptions.gradient.colorStops[]

options.cornersSquareOptions.gradient.colorStops[]

options.cornersDotOptions.gradient.colorStops[]

| Property | Type | Default Value | Description | | -------- | ---------------- | ------------- | ----------------------------------- | | offset | number (0 - 1) | | Position of color in gradient range | | color | string | | Color of stop in gradient range |

QRCodeStyling methods

QRCodeStyling.append(container) => void

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

QRCodeStyling.getRawData(extension) => Promise<Blob>

| Param | Type | Default Value | Description | | --------- | ------------------------------------ | ------------- | ----------- | | extension | string ('png' 'jpeg' 'webp' 'svg') | 'png' | Blob type |

QRCodeStyling.update(options) => void

| Param | Type | Description | | ------- | ------ | -------------------------------------- | | options | object | The same options as for initialization |

QRCodeStyling.download(downloadOptions) => Promise<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' 'svg') | 'png' | File extension |

If you find this library useful, you may also like:

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme