EasyQRCodeJS is a powerful, cross-browser QR code generation library that uses JavaScript and runs on DOM-based client browsers. It can be downloaded directly in the browser. It supports Canvas, SVG, and Table drawing methods. It provides flexible configurations, including dot style, Logo, background image, color, title, and support for binary (HEX) data mode. It is also compatible with Angular, Vue.js, React, Next.js, and Svelte frameworks.

EasyQRCodeJS Shi Shi Yong JavaScript De Yi Ge Qiang Da De , Kua Liu Lan Qi De Er Wei Ma Sheng Cheng Ku . Yun Xing Zai Ji Yu DOM De Ke Hu Duan Liu Lan Qi ,Bing Neng Gou Zai Liu Lan Qi Zhong Jin Xing Xia Zai . Ta Zhi Chi Canvas, SVGHe TableHui Tu Fang Fa . Ti Gong Ling Huo De Pei Zhi ,Bao Gua Dian Yang Shi , Logo, Bei Jing Tu Pian , Cai Se ,Biao Ti He Er Jin Zhi (Shi Liu Jin Zhi )Shu Ju Mo Shi Zhi Chi . Ta Huan Neng Yu Angular, Vue.js, React, Next.jsHe SvelteKuang Jia Jian Rong .

• 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
  • Download the QRCode Image in the Browser
  • 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

• English

  • Cross-browser support for QR code generation based on HTML5 Canvas, SVG and Table

  • Support unicode character set: Hello, konnichiha, konnichiha, Geia, Privet, nmste, swasdii, Privit, slm, Zdravei, sabaanydii, Pershendetje, Barew, Ni Hao

  • Download the QRCode image in the browser

  • 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

• Zhong Wen

  • Kua Liu Lan Qi ,Zhi Chi Ji Yu HTML5 Canvas, SVG He Table De Er Wei Ma Sheng Cheng

  • Zhi Chi Unicode Zi Fu Ji : Hello, konnichiha, konnichiha, Geia, Privet, nmste, swasdii, Privit, slm, Zdravei, sabaanydii, Pershendetje, Barew, Ni Hao

  • Zai Liu Lan Qi Zhong Xia Zai

  • Zhi Chi Dian Xing Feng Ge De Required Patterns

  • Zhi Chi Quiet Zone She Zhi

  • Zhi Chi Zi Ding Yi Position Pattern Nei Tian Chong He Wai Bian Kuang Yan Se

  • Zhi Chi Zi Ding Yi Alignment Pattern Nei Tian Chong He Wai Bian Kuang Yan Se

  • Zhi Chi Zi Ding Yi Timing Patterns Chui Zhi ,Shui Ping Yan Se

  • Zhi Chi Logo Tu Pian (Bao Gua Bei Jing Tou Ming De PNG Tu Pian )

  • Zhi Chi Background Image Bei Jing Tu Pian

  • Zhi Chi Biao Ti ,Fu Biao Ti She Zhi

  • Bu Yi Lai Ren He Di San Fang

  • Zhi Chi AMD,CMD, CommonJS/Node.js JavaScript Mo Kuai Jia Zai Gui Fan

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

  • Er Jin Zhi Shu Ju Mo Shi Zhi Chi

  • TypeScript Zhi Chi

Try It!

• Download install

  https://github.com/ushelp/EasyQRCodeJS

• Npm install

  npm install easyqrcodejs

• Script load

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

• AMD load

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

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

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

• 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

• download(fileName)

  qrcode.download("easyQRCode"); // Download the image or svg file, the filename does not need to include extension, '.png' or '.svg' suffix will be added automatically

For a long time, I have not been included to add a download function to our features, because due to browser environment restrictions, it cannot guarantee to truly fully output the image seen by the user.

On the other hand, I see many user demands related to downloading, and there are also different implementation methods, so I decide to provide a friendly and as fully-featured download implementation as possiable.

However, saving Canvas or SVG images on the client side is subject to many restrictions in the browser environments. For example, if your EasyQRCode image used an external image and there is a cross domain issue, you may be able to see the exernal image in the browser, but actully these images may not be able to be read normally and saved to your download file.

Therefore, if your requirement is to save the QRCode as an image, you may consider using EasyQRCodeJS-NodeJS on the server side to gain more complete control.

1. Add dependency

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

2. [NAME].component.html

   
   <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(){
   // ....
   }
   
   }

1. Add dependency

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

2. Template

   
   <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>

1. Add dependency

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

2. Script

   • JavaScript

     ); } } export default App;">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;