QR Code Generator With Logo And Title Support – EasyQRCodeJS

EasyQRCodeJS is a cross-browser, client-side QR code generator that supports custom logo and title.

Based on JavaScript, HTML5 canvas and HTML table. Heavily based on the qrcodejs library.

How to use it:

Install & download.

# NPM
$ npm install easyqrcodejs --save

Import the EasyQRCodeJS into the HTML document.

<script src="easy.qrcode.js"></script>

Create a container in which you want to place the QR code.

<div id="qrcode"></div>

Generate a basic QR code.

var qrcode = new QRCode(document.getElementById("qrcode"), {
    text: "https://cssscript.com"
});

Add a custom logo to the QR code.

var qrcode = new QRCode(document.getElementById("qrcode"), {
    text: "https://cssscript.com",
    logo: "logo.png",
    logoWidth: undefined,
    logoHeight: undefined,
    logoBackgroundColor: '#ffffff',
    logoBackgroundTransparent: false
});

Add custom title and subtitle to the QR code.

var qrcode = new QRCode(document.getElementById("qrcode"), {
    title: "",
    titleFont: "bold 16px Arial",
    titleColor: "#000000",
    titleBackgroundColor: "#ffffff",
    titleHeight: 0,
    titleTop: 30, 
    subTitle: "",
    subTitleFont: "14px Arial",
    subTitleColor: "#4F4F4F",
    subTitleTop: 0,
});

Customize the appearance of the QR code.

var qrcode = new QRCode(document.getElementById("qrcode"), {
    width: 256,
    height: 256,
    typeNumber: 4,
    colorDark: "#000000",
    colorLight: "#ffffff",
    correctLevel: QRErrorCorrectLevel.H,
    quietZone: 0,
    quietZoneColor: 'transparent',
    // === Posotion Pattern(Eye) Color
    PO: undefined, // Global Posotion Outer color. if not set, the defaut is `colorDark`
    PI: undefined, // Global Posotion Inner color. if not set, the defaut is `colorDark`
    PO_TL: undefined, // Posotion Outer - Top Left 
    PI_TL: undefined, // Posotion Inner - Top Left 
    PO_TR: undefined, // Posotion Outer - Top Right 
    PI_TR: undefined, // Posotion Inner - Top Right 
    PO_BL: undefined, // Posotion Outer - Bottom Left 
    PI_BL: undefined, // Posotion Inner - Bottom Left 
    // === Alignment Color
    AO: undefined, // Alignment Outer. if not set, the defaut is `colorDark`
    AI: undefined, // Alignment Inner. if not set, the defaut is `colorDark`
    // === Timing Pattern Color
    timing: undefined, // Global Timing color. if not set, the defaut is `colorDark`
    timing_H: undefined, // Horizontal timing color
    timing_V: undefined, // Vertical timing color
    // ==== Backgroud Image
    backgroundImage: undefined, // Background Image
    backgroundImageAlpha: 1, // Background image transparency, value between 0 and 1. default is 1. 
    autoColor: false,
    autoColorDark: "rgba(0, 0, 0, .6)", // Automatic color: dark CSS color
    autoColorLight: "rgba(255, 255, 255, .7)", // Automatic color: light CSS color
    // IE9+ Only
    dotScale: 1,
    // from Version 1 to Version 40. 0 means automatically choose the closest version based on the text length.
    version: 0, 
    // Whether set the QRCode Text as the title attribute value of the image
    tooltip: false, 
    // binary mode or not
    binary: false, 
    // or 'svg'
    drawer: 'canvas',
    // specifies the CORS setting to use when retrieving the image
    crossOrigin: null
    // ==== Event Handler
    onRenderingStart: undefined,
    onRenderingEnd: undefined,
});

Remove the QR code.

qrcode.clear();

Re-generate a new QR code.

qrcode.makeCode("New Content Here");

Resize the QR code.

qrcode.resize(460, 460);

Changelog:

v4.4.13 (09/06/2022)

• Update the width of title to not include quietZone

v4.4.12 (06/05/2022)

• Height calculation optimization

v4.4.9 (12/28/2021)

• autoColor bug fixed

v4.4.9 (12/21/2021)

• improvement.

v4.4.6 (08/29/2021)

• object is logged to console issue fixed

v4.4.5 (08/19/2021)

• resize() function can not work bug fixed

v4.4.4 (08/13/2021)

• Update

v4.4.3 (06/03/2021)

• Fixed data out of bounds error bug.

v4.4.2 (05/27/2021)

• minmum block size for IE

v4.4.1 (05/26/2021)

• Set the block minimum to 1 pixel

v4.3.5 (04/30/2021)

• update text font.

v4.3.4 (04/01/2021)

• Fixed position/eyes dotScale bug.

v4.3.3 (03/09/2021)

• autoColor bug fixed.

v4.3.2 (02/01/2021)

• Remove annoying console log

v4.3.1 (01/06/2021)

• Fixed `quietZoneColor` issue

v4.3.0 (01/03/2021)

• Add `autoColorDark`, `autoColorLight` options

v4.2.1 (12/29/2020)

• Bugfixed

v4.2.0 (12/29/2020)

• Add crossOrigin option.

v4.1.0 (12/17/2020)

• Add dotSacale for Timing and Alignment

v4.0.0 (10/13/2020)

• Add the feature of generating SVG images

v3.8.2 (09/28/2020)

• Updated

v3.8.1 (08/11/2020)

• Add EasyQRCode-React-Native

v3.8.0 (08/04/2020)

• Cross-browser support for QR code generation based on HTML5 Canvas and Table
• Required Patterns that support dot style
• Support for Quiet Zone settings
• Support custom Position Pattern inner fill and outer border color
• Support custom Alignment Pattern inner fill and outer border color
• Support custom Timing Patterns vertical, horizontal color
• Support Logo images (including transparent PNG images)
• Support Background Image
• Support for title, subtitle settings
• Has no dependencies
• Support AMD, CMD, CommonJS/Node.js JavaScript modules
• Angular, Vue.js, React, Next.js Support
• Support binary(hex) data mode

v3.7.0 (06/05/2020)

• Preserve logo image proportions support. You can use any proportion of your logo image, it will be displayed centered in proportion within the range of logoWidth and logoHeight.

v3.6.0 (05/05/2020)

• Update easy.qrcode.js

v3.5.4 (04/14/2020)

• Fix the error of colorLight in PNG format.

v3.5.2 (03/24/2020)

• fixed title and subtitle top invalid issue

v3.5.0 (01/14/2020)

• You can control the QR Code version(0-40) now, 0 means that automatically choose the closest version based on the text length

v3.4.0 (01/10/2020)

• Fixed a bug when quietZone and title were used together
• Change onRenderingStart() to onRenderingStart(qrCodeOptions)

v3.3.0 (12/20/2019)

• A feature-rich cross-browser QRCode generator for pure javascript.

v3.2.0 (09/06/2019)

• Add Angular, Vue.js, React support

v3.2.0 (09/06/2019)

• Updated

v3.1.0 (08/12/2019)

• Support AMD, CMD, CommonJS/Node.js JavaScript modules

v3.0.0 (08/08/2019)

• Added more options

v2.2.0 (07/19/2019)

• Added more options