EasyQRCodeJS

EasyQRCodeJS is a feature-rich cross-browser pure JavaScript QRCode generation library. Support for Javascript modules. Support setting Dot style, Logo, Background image, Colorful, Title and more.

EasyQRCodeJS 是一个功能丰富的跨浏览器的纯 JavaScript QRCode 生成库。支持 JavaScript 模块化加载。支持点状风格，Logo，背景图片，规则色彩控制，标题等设置。

Table of contents

• Choose what you need
• Feature
• Try It!
• Demo preview
• QR Code Structure
• Installation
• Basic Usages
• QRCode API
  • Object
  • Method
• Angular Support
• Vue.js Support
• React Support
• Next.js Support
• Browser Compatibility
• License
• EasyQRCodeJS-Premium:
• End

Choose what you need

Project	Support
EasyQRCodeJS	Running with DOM on CLIENT-SIDE . Browser(IE6+, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, ETC.), Electron, NW.js, ETC.
EasyQRCodeJS-NodeJS	Running without DOM on SERVER-SIDE. Save image to file or get data url text. NodeJS, Electron, NW.js, ETC.

Feature

• English

  • 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

• 中文

  • 跨浏览器，支持基于 HTML5 Canvas 和 Table 的二维码生成

  • 支持点形风格的 Required Patterns

  • 支持 Quiet Zone 设置

  • 支持自定义 Position Pattern 内填充和外边框颜色

  • 支持自定义 Alignment Pattern 内填充和外边框颜色

  • 支持自定义 Timing Patterns 垂直，水平颜色

  • 支持 Logo 图片（包括背景透明的 PNG 图片）

  • 支持 Background Image 背景图片

  • 支持标题，副标题设置

  • 不依赖任何第三方

  • 支持 AMD，CMD, CommonJS/Node.js JavaScript 模块加载规范

  • Angular, Vue.js, React, NEXT.js 支持

Try It!

Try It!

Demo preview

QR Code Structure

Installation

• Download install

  1<script src="dist/easy.qrcode.min.js" type="text/javascript" charset="utf-8"></script>
  2

• Npm install

  1npm install easyqrcodejs

Basic Usages

1<div id="qrcode"></div>
2
3<script type="text/javascript">
4	// Options
5	var options = {
6		text: "https://github.com/ushelp/EasyQRCodeJS"
7	};
8	
9	// Create QRCode Object
10	new QRCode(document.getElementById("qrcode"), options);
11</script>

• AMD load

  1require.config({
  2	paths: {
  3		QRCode: "<YOUR_PATH>/easy.qrcode.min"
  4	}
  5});
  6
  7require(["QRCode"], function(QRCode){
  8	
  9	// Your code...
  10	
  11});

• Node.js load(For Example, Use in Electron)

  1const QRCode = require('easyqrcodejs');
  2
  3// Your code...

QRCode API

Object

1var qrcode = new QRCode(DOM_object, options_object);

• Options

  1 var options_object = {
  2		// ====== Basic
  3		text: "https://github.com/ushelp/EasyQRCodeJS",
  4		width: 256,
  5		height: 256,
  6		colorDark : "#000000",
  7		colorLight : "#ffffff",
  8		correctLevel : QRCode.CorrectLevel.H, // L, M, Q, H
  9		dotScale: 1 // Must be greater than 0, less than or equal to 1. default is 1
  10		
  11		// ====== Quiet Zone
  12		/*
  13		quietZone: 0,
  14		quietZoneColor: 'transparent',
  15		*/
  16
  17		// ====== Logo
  18		/*
  19		logo:"../demo/logo.png", // Relative address, relative to `easy.qrcode.min.js`
  20		logo:"http://127.0.0.1:8020/easy-qrcodejs/demo/logo.png", 
  21		logoWidth:80, // widht. default is automatic width
  22		logoHeight:80 // height. default is automatic height
  23		logoBackgroundColor:'#fffff', // Logo backgroud color, Invalid when `logBgTransparent` is true; default is '#ffffff'
  24		logoBackgroundTransparent:false, // Whether use transparent image, default is false
  25		*/
  26	
  27		// ====== Backgroud Image
  28		/*
  29		backgroundImage: '', // Background Image
  30		backgroundImageAlpha: 1, // Background image transparency, value between 0 and 1. default is 1. 
  31		autoColor: false,
  32		*/
  33		
  34		// ====== Colorful
  35		// === Posotion Pattern(Eye) Color
  36		/*
  37		PO: '#e1622f', // Global Posotion Outer color. if not set, the defaut is `colorDark`
  38		PI: '#aa5b71', // Global Posotion Inner color. if not set, the defaut is `colorDark`
  39		PO_TL:'', // Posotion Outer color - Top Left 
  40		PI_TL:'', // Posotion Inner color - Top Left 
  41		PO_TR:'', // Posotion Outer color - Top Right 
  42		PI_TR:'', // Posotion Inner color - Top Right 
  43		PO_BL:'', // Posotion Outer color - Bottom Left 
  44		PI_BL:'', // Posotion Inner color - Bottom Left 
  45		*/
  46		// === Alignment Color
  47		/*
  48		AO: '', // Alignment Outer. if not set, the defaut is `colorDark`
  49		AI: '', // Alignment Inner. if not set, the defaut is `colorDark`
  50		*/
  51		// === Timing Pattern Color
  52		/*
  53		timing: '#e1622f', // Global Timing color. if not set, the defaut is `colorDark`
  54		timing_H: '', // Horizontal timing color
  55		timing_V: '', // Vertical timing color
  56		*/
  57		
  58		// ====== Title
  59		/*
  60		title: 'QR Title', // content 
  61		titleFont: "bold 18px Arial", //font. default is "bold 16px Arial"
  62		titleColor: "#004284", // color. default is "#000"
  63		titleBackgroundColor: "#fff", // background color. default is "#fff"
  64		titleHeight: 70, // height, including subTitle. default is 0
  65		titleTop: 25, // draws y coordinates. default is 30
  66		*/
  67	   
  68		// ====== SubTitle
  69		/*
  70		subTitle: 'QR subTitle', // content
  71		subTitleFont: "14px Arial", // font. default is "14px Arial"
  72		subTitleColor: "#004284", // color. default is "4F4F4F"
  73		subTitleTop: 40, // draws y coordinates. default is 0
  74		*/
  75	   
  76		// ===== Event Handler
  77		/*
  78		onRenderingStart: undefined,
  79		onRenderingEnd: undefined,
  80		*/
  81	   
  82		// ===== Versions
  83		/*
  84		version: 0, // The symbol versions of QR Code range from Version 1 to Version 40. default 0 means automatically choose the closest version based on the text length.
  85		*/        
  86	   
  87		// ===== Tooltip
  88		/*
  89		tooltip: false // Whether set the QRCode Text as the title attribute value of the QRCode div
  90		*/ 
  91}

  Option	Required	Type	Defaults	Description	Compatibility
  Basic options	---	---	---	---	---
  text	Y	String	''	Text
  width	N	Number	256	Width
  height	N	Number	256	Height
  colorDark	N	String	#000000	Dark CSS color, transparent
  colorLight	N	String	#ffffff	Light CSS color, transparent
  correctLevel	N	Enum	QRCode.CorrectLevel.H	QRCode.CorrectLevel.H QRCode.CorrectLevel.Q QRCode.CorrectLevel.M QRCode.CorrectLevel.L
  dotScale	N	Number	1.0	Dot style required Patterns. Ranges: 0-1.0
  Quiet Zone	---	---	---	---	---
  quietZone	N	Number	0	Quiet Zone size
  quietZoneColor	N	String	transparent	Background CSS color to Quiet Zone
  Logo options	---	---	---	---	---
  logo	N	String	undefined	Logo Image Path or Base64 encoded image. If use relative address, relative to easy.qrcode.min.js
  logoWidth	N	Number	undefined	Height
  logoHeight	N	Number	undefined	Width
  logoBackgroundTransparent	N	Boolean	false	Whether the background transparent image(PNG) shows transparency. When true, logoBackgroundColor is invalid
  logoBackgroundColor	N	String	#ffffff	Set Background CSS Color when image background transparent. Valid when logoBackgroundTransparent is false
  Backgroud Image options	---	---	---	---	---
  backgroundImage	N	String	undefined	Background Image Path or Base64 encoded Image. If use relative address, relative to easy.qrcode.min.js
  backgroundImageAlpha	N	Number	1.0	Background image transparency. Ranges: 0-1.0
  autoColor	N	Boolean	false	Automatic color adjustment
  Posotion Pattern Color options	---	---	---	---	---
  PO	N	String	undefined	Global Posotion Outer CSS color. if not set, the defaut is colorDark
  PI	N	String	undefined	Global Posotion Inner CSS color. if not set, the defaut is colorDark
  PO_TL	N	String	undefined	Posotion Outer CSS color - Top Left
  PI_TL	N	String	undefined	Posotion Inner CSS color - Top Left
  PO_TR	N	String	undefined	Posotion Outer CSS color - Top Right
  PI_TR	N	String	undefined	Posotion Inner CSS color - Top Right
  PO_BL	N	String	undefined	Posotion Outer CSS color - Bottom Left
  PI_BL	N	String	undefined	Posotion Inner CSS color - Bottom Left
  Alignment Color options	---	---	---	---	---
  AO	N	String	undefined	Alignment Outer CSS color. if not set, the defaut is colorDark
  AI	N	String	undefined	Alignment Inner CSS color. if not set, the defaut is colorDark
  Timing Pattern Color options	---	---	---	---	---
  timing	N	String	undefined	Global Timing CSS color. if not set, the defaut is colorDark
  timing_H	N	String	undefined	Horizontal timing CSS color
  timing_V	N	String	undefined	Vertical timing CSS color
  Title options	---	---	---	---	---
  title	N	String	''
  titleFont	N	String	bold 16px Arial	CSS Font
  titleColor	N	String	#000000	CSS color
  titleBackgroundColor	N	String	#ffffff	CSS color
  titleHeight	N	Number	0	Title Height, Include subTitle
  titleTop	N	Number	30	draws y coordinates.
  SubTitle options	---	---	---	---	---
  subTitle	N	String	''
  subTitleFont	N	String	14px Arial	CSS Font
  subTitleColor	N	String	#4F4F4F	CSS color
  subTitleTop	N	Number	0	draws y coordinates. default is 0
  Event Handler options	---	---	---	---	---
  onRenderingStart(qrCodeOptions)	N	Function	undefined	Callback function when the rendering start. can use to hide loading state or handling.
  onRenderingEnd(qrCodeOptions, base64DataURL)	N	Function	undefined	Callback function when the rendering ends. base64DataURL parameter is the base64 data of QRCode image(if not support canvas return null).
  Version options	---	---	---	---
  version	N	Number	0	The symbol versions of QR Code range from Version 1 to Version 40. default 0 means automatically choose the closest version based on the text length. Information capacity and versions of QR Codes NOTE: If you set a value less than the minimum version available for text, the minimum version is automatically used.
  Tooltip options	---	---	---	---
  tooltip	N	Boolean	false	Whether set the QRCode Text as the title attribute value of the QRCode div.

Method

• clear()

  1qrcode.clear(); // remove the code.

• makeCode(text)

  1qrcode.makeCode("https://github.com/ushelp/EasyQRCodeJS"); // make another code text.

• resize(widht, height)

  1qrcode.resize(480, 480); // Resize the image 

Angular Support

1. Add dependency

   1# install with `npm`
   2npm install --save easyqrcodejs
   3
   4# Alternatively you may use `yarn`:
   5yarn add easyqrcodejs

2. [NAME].component.html

   1<!-- DOM Element-->
   2<div #qrcode></div>

3. [NAME].component.ts

   1import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
   2import * as QRCode from 'easyqrcodejs';
   3
   4@Component({
   5  selector: 'app-root',
   6  templateUrl: './app.component.html',
   7  styleUrls: ['./app.component.css']
   8})
   9export class AppComponent implements AfterViewInit{
   10    
   11  // Your DOM Element
   12  @ViewChild('qrcode', {static: false}) qrcode: ElementRef;
   13
   14  ngAfterViewInit(){
   15
   16    // Options
   17    var options = {
   18      text: "https://github.com/ushelp/EasyQRCodeJS"
   19    }
   20
   21    // Create new QRCode Object
   22    new QRCode(this.qrcode.nativeElement, options);
   23
   24  }
   25
   26  btnClick(){
   27    // ....
   28  }
   29
   30}

Vue.js Support

1. Add dependency

   1# install with `npm`
   2npm install --save easyqrcodejs
   3
   4# Alternatively you may use `yarn`:
   5yarn add easyqrcodejs

2. Template

   1<!-- DOM Element-->
   2<div ref="qrcode></div>

3. Script

   1<script>
   2import * as QRCode from 'easyqrcodejs'   
   3 
   4export default {
   5
   6  mounted(){
   7    // Options
   8    var options = {
   9      text: "https://github.com/ushelp/EasyQRCodeJS"
   10    }
   11    
   12    // Create new QRCode Object
   13    new QRCode(this.$refs.qrcode, options);
   14  },
   15  methods:{
   16      btnClick(){
   17
   18      }
   19  }
   20}
   21</script>

React Support

1. Add dependency

   1# install with `npm`
   2npm install --save easyqrcodejs
   3
   4# Alternatively you may use `yarn`:
   5yarn add easyqrcodejs

2. Script

   1import React from 'react';
   2import './App.css';
   3import * as QRCode from 'easyqrcodejs';
   4
   5class App extends React.Component {
   6
   7    constructor(props) {
   8        super(props);
   9        this.qrcode = React.createRef();
   10    }
   11
   12    componentDidMount() {
   13        // Options
   14        var options = {
   15            text: "https://github.com/ushelp/EasyQRCodeJS"
   16        }
   17        // Create new QRCode Object
   18        new QRCode( this.qrcode.current, options);
   19    }
   20    render() {
   21        return ( 
   22        <div className = "App">
   23            <div ref={this.qrcode}></div> 
   24        </div>
   25        );
   26    }
   27}
   28
   29export default App;

Next.js Support

1. Add dependency

   Add easy.qrcode.min.js to your static files folder called static(<Next.js 9.1)/public(>=Next.js 9.1) in the root directory.

2. Script

   1import Layout from '../components/Layout';
   2// Import Head
   3import Head from "next/head";
   4
   5class About extends React.Component {
   6  constructor(props) {
   7    super(props);
   8    // QRCode DOM
   9    this.qrcodeDOM = React.createRef();
   10    // QRCode
   11    this.qrcode=null;
   12  }
   13  
   14  //QRCode generator
   15  generate(color){
   16      if(this.qrcode){
   17          this.qrcode.clear();
   18      }
   19      var options = {
   20          text: "https://github.com/ushelp/EasyQRCodeJS",
   21          colorDark : color?color:'#000000'
   22      };
   23      this.qrcode=new QRCode(this.qrcodeDOM.current, options);
   24  }
   25  
   26  // Gerenate QRCode on mount
   27  componentDidMount() { 
   28       this.generate()
   29  }
   30  
   31  render() {
   32    return (
   33      <Layout>
   34          <p>This is About page</p>
   35          {/* DOM */}
   36          <div ref={this.qrcodeDOM}></div>
   37          {/* Gerenate QRCode on click */}
   38          <button onClick={this.generate.bind(this, '#ff0000')}>QRCode Generate</button>
   39          {/* Include EasyQRCodeJS library*/}
   40          <Head>
   41           <script type="text/javascript" src="/public/easy.qrcode.min.js"></script>
   42         </Head>
   43           <p>This is About page</p>
   44      </Layout>
   45    );
   46  }
   47}
   48
   49export default About;

Browser Compatibility

IE6+, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, ETC.

License

MIT License

EasyQRCodeJS-Premium

EasyQRCodeJS-Premium is a more powerful and comprehensive business enterprise edition. You can use Canvas to customize any element, Such as Eye frame sharp, Eye ball sharp, QR Body block sharp, etc.

If you need more functions, we can provide you with customized development of API libraries or products. please contact me to buy the business enterprise edition.

EasyQRCodeJS-Premium 是功能更加强大和全面的商业/企业版本。让您可以在 QRCode 中通过 Canvas 自定义任何喜欢的元素，例如 Eye frame sharp, Eye ball sharp, QR Body block sharp 等等。

如果您需要更多功能，我们可以为您提供 API 库或产品的定制开发。请联系我购买商业/企业版本。

End

Email：inthinkcolor@gmail.com

http://www.easyproject.cn

Donation/捐助:

我们相信，每个人的点滴贡献，都将是推动产生更多、更好免费开源产品的一大步。

感谢慷慨捐助，以支持服务器运行和鼓励更多社区成员。

We believe that the contribution of each bit by bit, will be driven to produce more and better free and open source products a big step.

Thank you donation to support the server running and encourage more community members.