EasyQRCodeJS

EasyQRCodeJS is a feature-rich cross-browser pure JavaScript QRCode generation library. Support Canvas, SVG and Table drawing methods. Support Dot style, Logo, Background image, Colorful, Title etc. settings. Support Angular, Vue.js, React, Next.js, Svelte framework. Support binary(hex) data mode.(Running with DOM on client side)

EasyQRCodeJS JavaScript QRCode Canvas, SVG, Table JavaScript Logo Angular, Vue.js, React, Next.js, Svelte ( DOM )

Table of contents

• EasyQRCodeJS
  • Table of contents
  • Choose what you need
  • Feature
  • Try It!
  • Demo preview
  • QR Code Structure
  • Installation
  • Load
  • Basic Usages
  • QRCode API
    • Object
    • Options
    • Method
  • Angular Support
  • Vue.js Support
  • React Support
  • Next.js Support
  • Svelte Support
  • FQA
    • Q1. Tainted canvases may not be exported.
    • Q2. How to show the QRCode image only after rendering is done?
  • Browser Compatibility
  • License
  • EasyQRCodeJS-Premium
  • End

Choose what you need

Feature

• English

  • Cross-browser support for QR code generation based on HTML5 Canvas, SVG 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, Svelte Support

  • Support binary(hex) data mode

  • Support TypeScript

• ---

  • HTML5 Canvas, SVG Table

  • Required Patterns

  • Quiet Zone

  • Position Pattern

  • Alignment Pattern

  • Timing Patterns

  • Logo PNG

  • Background Image

  • AMDCMD, CommonJS/Node.js JavaScript

  • Angular, Vue.js, React, NEXT.js, Svelte

  • TypeScript

Try It!

Try It!

Demo preview

QR Code Structure

Installation

• Download install

  ushelp/EasyQRCodeJS

• Npm install

   npm install easyqrcodejs
  

Load

• Script load

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

• AMD load

   require.config({
   	paths: {
   		QRCode: "<PATH>/easy.qrcode.min"
   	}
   });
   
   require(["QRCode"], function(QRCode){
   	
   	// Your code...
   	
   });
  

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

   const QRCode = require('<PATH>/easyqrcodejs');
   
   // Your code...
  

Basic Usages

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

<script type="text/javascript">
	// Options
	var options = {
		text: "https://github.com/ushelp/EasyQRCodeJS"
	};
	
	// Create QRCode Object
	new QRCode(document.getElementById("qrcode"), options);
</script>

QRCode API

Object

var qrcode = new QRCode(DOM_object, options_object);

Options

 var options_object = {
    // ====== Basic
    text: "https://github.com/ushelp/EasyQRCodeJS",
    width: 256,
    height: 256,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H, // L, M, Q, H
    
    // ====== dotScale
    /*
    dotScale: 1, // For body block, must be greater than 0, less than or equal to 1. default is 1
    
    dotScaleTiming: 1, // Dafault for timing block , must be greater than 0, less than or equal to 1. default is 1
    dotScaleTiming_H: undefined, // For horizontal timing block, must be greater than 0, less than or equal to 1. default is 1
    dotScaleTiming_V: undefined, // For vertical timing block, must be greater than 0, less than or equal to 1. default is 1
    
    dotScaleA: 1, // Dafault for alignment block, must be greater than 0, less than or equal to 1. default is 1
    dotScaleAO: undefined, // For alignment outer block, must be greater than 0, less than or equal to 1. default is 1
    dotScaleAI: undefined, // For alignment inner block, must be greater than 0, less than or equal to 1. default is 1
    */
   
    // ====== Quiet Zone
    /*
    quietZone: 0,
    quietZoneColor: "rgba(0,0,0,0)",
    */

    // ====== Logo
    /*
    logo: "../demo/logo.png", // Relative address, relative to `easy.qrcode.min.js`
    logo: "http://127.0.0.1:8020/easy-qrcodejs/demo/logo.png", 
    logoWidth: 80, // fixed logo width. default is `width/3.5`
    logoHeight: 80, // fixed logo height. default is `heigth/3.5`
    logoMaxWidth: undefined, // Maximum logo width. if set will ignore `logoWidth` value
    logoMaxHeight: undefined, // Maximum logo height. if set will ignore `logoHeight` value
    logoBackgroundColor: '#fffff', // Logo backgroud color, Invalid when `logBgTransparent` is true; default is '#ffffff'
    logoBackgroundTransparent: false, // Whether use transparent image, default is false
    */

    // ====== Backgroud Image
    /*
    backgroundImage: '', // Background Image
    backgroundImageAlpha: 1, // Background image transparency, value between 0 and 1. default is 1. 
    autoColor: false, // Automatic color adjustment(for data block)
    autoColorDark: "rgba(0, 0, 0, .6)", // Automatic color: dark CSS color
    autoColorLight: "rgba(255, 255, 255, .7)", // Automatic color: light CSS color
    */
    
    // ====== Colorful
    // === Posotion Pattern(Eye) Color
    /*
    PO: '#e1622f', // Global Posotion Outer color. if not set, the defaut is `colorDark`
    PI: '#aa5b71', // Global Posotion Inner color. if not set, the defaut is `colorDark`
    PO_TL:'', // Posotion Outer color - Top Left 
    PI_TL:'', // Posotion Inner color - Top Left 
    PO_TR:'', // Posotion Outer color - Top Right 
    PI_TR:'', // Posotion Inner color - Top Right 
    PO_BL:'', // Posotion Outer color - Bottom Left 
    PI_BL:'', // Posotion Inner color - Bottom Left 
    */
    // === Alignment Color
    /*
    AO: '', // Alignment Outer. if not set, the defaut is `colorDark`
    AI: '', // Alignment Inner. if not set, the defaut is `colorDark`
    */
    // === Timing Pattern Color
    /*
    timing: '#e1622f', // Global Timing color. if not set, the defaut is `colorDark`
    timing_H: '', // Horizontal timing color
    timing_V: '', // Vertical timing color
    */
    
    // ====== Title
    /*
    title: 'QR Title', // content 
    titleFont: "normal normal bold 18px Arial", //font. default is "bold 16px Arial"
    titleColor: "#004284", // color. default is "#000"
    titleBackgroundColor: "#fff", // background color. default is "#fff"
    titleHeight: 70, // height, including subTitle. default is 0
    titleTop: 25, // draws y coordinates. default is 30
    */
   
    // ====== SubTitle
    /*
    subTitle: 'QR subTitle', // content
    subTitleFont: "normal normal normal 14px Arial", // font. default is "14px Arial"
    subTitleColor: "#004284", // color. default is "4F4F4F"
    subTitleTop: 40, // draws y coordinates. default is 0
    */
   
    // ===== Event Handler
    /*
    onRenderingStart: undefined,
    onRenderingEnd: undefined,
    */
   
    // ===== Versions
    /*
    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.
    */     
   
    // ===== Binary(hex) data mode
    /*
    binary: false, // Whether it is binary mode, default is text mode. 
    */ 
    
    // ===== Tooltip
    /*
    tooltip: false, // Whether set the QRCode Text as the title attribute value of the QRCode div
    */
   
    // ==== CORS
    /*
    crossOrigin: null, // String which specifies the CORS setting to use when retrieving the image. null means that the crossOrigin attribute is not set.
    */
   
    // =====  Drawing method
    /*
    drawer: 'canvas', // Which drawing method to use. 'canvas', 'svg'. default is 'canvas'
    */   
   
    // =====  UTF-8 without BOM
    /*
    utf8WithoutBOM: true
    */   

}

Method

• clear()

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

• makeCode(text)

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

• resize(width, height)

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

Angular Support

1. Add dependency

   # install with `npm`
   npm install --save easyqrcodejs
   
   # Alternatively you may use `yarn`:
   yarn add easyqrcodejs
   

2. [NAME].component.html

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

3. Activate esModuleInterop in your tsconfig.json

   "esModuleInterop": true,
   

4. [NAME].component.ts

   import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
   import QRCode from 'easyqrcodejs';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent implements AfterViewInit{
       
     // Your DOM Element
     @ViewChild('qrcode', {static: false}) qrcode: ElementRef;
   
     ngAfterViewInit(){
   
       // Options
       var options = {
         text: "https://github.com/ushelp/EasyQRCodeJS"
       }
   
       // Create new QRCode Object
       new QRCode(this.qrcode.nativeElement, options);
   
     }
   
     btnClick(){
       // ....
     }
   
   }
   

Vue.js Support

1. Add dependency

   # install with `npm`
   npm install --save easyqrcodejs
   
   # Alternatively you may use `yarn`:
   yarn add easyqrcodejs
   

2. Template

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

3. Script

   <script>
   import * as QRCode from 'easyqrcodejs'   
    
   export default {
   
     mounted(){
       // Options
       var options = {
         text: "https://github.com/ushelp/EasyQRCodeJS"
       }
       
       // Create new QRCode Object
       new QRCode(this.$refs.qrcode, options);
     },
     methods:{
         btnClick(){
   
         }
     }
   }
   </script>
   

React Support

1. Add dependency

   # install with `npm`
   npm install --save easyqrcodejs
   
   # Alternatively you may use `yarn`:
   yarn add easyqrcodejs
   

2. Script

   • JavaScript

     import React from 'react';
     import './App.css';
     import * as QRCode from 'easyqrcodejs';
     
     class App extends React.Component {
     
         constructor(props) {
             super(props);
             this.qrcode = React.createRef();
         }
     
         componentDidMount() {
             // Options
             var options = {
                 text: "https://github.com/ushelp/EasyQRCodeJS"
             }
             // Create new QRCode Object
             new QRCode( this.qrcode.current, options);
         }
         render() {
             return ( 
             <div className = "App">
                 <div ref={this.qrcode}></div> 
             </div>
             );
         }
     }
     
     export default App;
     

   • TypeScript

     import React, { useEffect } from "react";
     import QRCode from "easyqrcodejs";
     
     function App() {
       const code = React.createRef<HTMLDivElement>();
     
       useEffect(() => {
         new QRCode(code.current, { text: "https://github.com/ushelp/EasyQRCodeJS" });
       }, [code]);
     
       return (
         <div className="App">
           <header className="App-header">
          
             <div ref={code}></div>
           </header>
         </div>
       );
     }
     
     export 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

   import Layout from '../components/Layout';
   // Import Head
   import Head from "next/head";
   
   class About extends React.Component {
     constructor(props) {
       super(props);
       // QRCode DOM
       this.qrcodeDOM = React.createRef();
       // QRCode
       this.qrcode=null;
     }
     
     //QRCode generator
     generate(color){
         if(this.qrcode){
             this.qrcode.clear();
         }
         var options = {
             text: "https://github.com/ushelp/EasyQRCodeJS",
             colorDark : color?color:'#000000'
         };
         this.qrcode=new QRCode(this.qrcodeDOM.current, options);
     }
     
     // Gerenate QRCode on mount
     componentDidMount() { 
          this.generate()
     }
     
     render() {
       return (
         <Layout>
             <p>This is About page</p>
             {/* DOM */}
             <div ref={this.qrcodeDOM}></div>
             {/* Gerenate QRCode on click */}
             <button onClick={this.generate.bind(this, '#ff0000')}>QRCode Generate</button>
             {/* Include EasyQRCodeJS library*/}
             <Head>
              <script type="text/javascript" src="/public/easy.qrcode.min.js"></script>
            </Head>
              <p>This is About page</p>
         </Layout>
       );
     }
   }
   
   export default About;
   

Svelte Support

1. Add dependency

   # install with `npm`
   npm install --save-dev easyqrcodejs
   
   # Alternatively you may use `yarn`:
   yarn add easyqrcodejs --dev
   

2. Component template

   QR.svelte:

   <script>
    import { onMount } from 'svelte';
    import QRCode from 'easyqrcodejs'
    // import * as QRCode from 'easyqrcodejs';
   
     export let codeValue;
     let node;
   
     onMount(() => {
       const options = {
         text: codeValue,
         // ... your other options
         width: 100,
         height: 100,
         quietZone: 10,
       };
       new QRCode(node, options);
     });
   </script>
   
   <div bind:this={node}></div>
   
   <style>
    div {
      /* make QR-wrapper squared */
       width: 100%;
       position: relative;
       padding: 50%;
       z-index: 1;
     }
     div :global(canvas) {
       /* fit QR to wrapper */
       width: 100%;
       height: 100%;
       position: absolute;
       left: 0;
       top: 0;
     }
   </style>
   

3. Layout

   index.svelte:

   <script>
     import QR from './QR.svelte';
   </script>
   
   <div class="qr-container">
     <QR text="Your awesome text here..." />
   </div>
   
   <style>
     .qr-container {
       /* your styles for container here */
     }
   </style>
   

FQA

Q1. Tainted canvases may not be exported.

When use canvas drawer, Canvas toDataURL function does not allow load cross domain image. there are three options to slove this problem:

• Option 1:

  Configure the crossOrigin attribute(crossorigin) for the image. Make sure that CORS is configured on the Server side.

  {
     // ...
   
     // String which specifies the CORS setting to use when retrieving the image. null means that the crossOrigin attribute is not set. 'anonymous', null.
     crossOrigin : 'anonymous',
   
     // ... 
  }
  

• Option 2:

  Put your image under the same domain with your page.

• Option 3:

  Use base64 image.

Q2. How to show the QRCode image only after rendering is done?

onRenderingStart: function(qrCodeOptions) {
    qrCodeOptions._element.style.display = 'none';
},
onRenderingEnd: function(qrCodeOptions) {
    qrCodeOptions._element.style.display = 'block';
},

Browser Compatibility

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

License

MIT License

EasyQRCodeJS-Premium

Let you draw freely!

EasyQRCodeJS-Premium is a more powerful and comprehensive enterprise version. You can use Canvas to customize any element, such as eye frame shape, eyeball shape, QR code block shape, and more. Also supports excavation (to prevent the QRcode overlap with the logo), random block mode.

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 , Eye ball , QR Body block Logo excavation Logo Random bolock mode.

API /

End

Email[email protected]

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.