QR Code Generator With Logo And Title Support – EasyQRCodeJS
| AUTHOR: | ushelp |
|---|---|
| VIEWS TOTAL: | 300 views |
| OFFICIAL PAGE: | Go to website |
| LAST UPDATE: | February 1, 2021 |
| LICENSE: | MIT |
Preview:
Description:
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.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
