Socket
Socket
Sign inDemoInstall

easyqrcodejs

Package Overview
Dependencies
0
Maintainers
1
Versions
46
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

    easyqrcodejs

Cross-browser QRCode generator for pure javascript. 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) dat

Version published
Weekly downloads
9.5K
decreased by-11.27%
Maintainers
1
Install size
1.07 MB
Created
Weekly downloads
 

Readme

Source

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

Choose what you need

ProjectSupport
EasyQRCodeJSRunning with DOM on CLIENT-SIDE . Browser(IE6+, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, ETC.), Electron, NW.js, ETC.
EasyQRCodeJS-NodeJSRunning without DOM on SERVER-SIDE. Save image to file(PNG/JPEG/SVG) or get data url text. NodeJS, Electron, NW.js, ETC.
EasyQRCode-React-NativeA QRCode generator for React Native. Generate QRCode image or get base64 data url text.

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 背景图片

    • 支持标题，副标题设置

    • 不依赖任何第三方

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

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

    • 二进制数据模式支持

    • TypeScript 支持

Try It!

Try It!

Demo preview

Demo preview

QR Code Structure

QR Code Structure

Installation

  • Download install

    https://github.com/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
    */   

}
OptionRequiredTypeDefaultsDescriptionCompatibility
Basic options---------------
textYString''Text 
widthNNumber256Width 
heightNNumber256Height 
colorDarkNString#000000Dark CSS color, rgba(0,0,0,0) 
colorLightNString#ffffffLight CSS color, rgba(255,255,255,0) 
correctLevelNEnumQRCode.CorrectLevel.HQRCode.CorrectLevel.H
QRCode.CorrectLevel.Q
QRCode.CorrectLevel.M
QRCode.CorrectLevel.L		 
Dot style---------------
dotScaleNNumber1.0Dot style scale. Ranges: 0-1.0 
dotScaleTimingNNumber1.0Dot style scale for timing. Ranges: 0-1.0 
dotScaleTiming_VNNumberundefinedDot style scale for horizontal timing. Ranges: 0-1.0 
dotScaleTiming_HNNumberundefinedDot style scale for vertical timing. Ranges: 0-1.0 
dotScaleANNumber1.0Dot style scale for alignment. Ranges: 0-1.0 
dotScaleAONNumberundefinedDot style scale for alignment outer. Ranges: 0-1.0 
dotScaleAINNumberundefinedDot style scale for alignment inner. Ranges: 0-1.0 
Quiet Zone---------------
quietZoneColorNStringrgba(0,0,0,0)Background CSS color to Quiet Zone 
Quiet Zone---------------
quietZoneNNumber0Quiet Zone size 
quietZoneColorNStringrgba(0,0,0,0)Background CSS color to Quiet Zone 
Logo options---------------
logoNStringundefinedLogo Image Path or Base64 encoded image. If use relative address, relative to easy.qrcode.min.js 
logoWidthNNumberwidth/3.5Fixed logo width. 
logoHeightNNumberheight/3.5fixed logo height. 
logoMaxWidthNNumberundefinedMaximum logo width. if set will ignore logoWidth value. 
logoMaxHeightNNumberundefinedMaximum logo height. if set will ignore logoHeight value. 
logoBackgroundTransparentNBooleanfalseWhether the background transparent image(PNG) shows transparency. When true, logoBackgroundColor is invalid 
logoBackgroundColorNString#ffffffSet Background CSS Color when image background transparent. Valid when logoBackgroundTransparent is false 
Backgroud Image options---------------
backgroundImageNStringundefinedBackground Image Path or Base64 encoded Image. If use relative address, relative to easy.qrcode.min.js 
backgroundImageAlphaNNumber1.0Background image transparency. Ranges: 0-1.0 
autoColorNBooleanfalseAutomatic color adjustment(for data block) 
autoColorDarkNStringrgba(0, 0, 0, .6)Automatic color: dark CSS color 
autoColorLightNStringrgba(255, 255, 255, .7)Automatic color: light CSS color 
Posotion Pattern Color options---------------
PONStringundefinedGlobal Posotion Outer CSS color. if not set, the defaut is colorDark 
PINStringundefinedGlobal Posotion Inner CSS color. if not set, the defaut is colorDark 
PO_TLNStringundefinedPosotion Outer CSS color - Top Left 
PI_TLNStringundefinedPosotion Inner CSS color - Top Left 
PO_TRNStringundefinedPosotion Outer CSS color - Top Right 
PI_TRNStringundefinedPosotion Inner CSS color - Top Right 
PO_BLNStringundefinedPosotion Outer CSS color - Bottom Left 
PI_BLNStringundefinedPosotion Inner CSS color - Bottom Left 
Alignment Color options---------------
AONStringundefinedAlignment Outer CSS color. if not set, the defaut is colorDark 
AINStringundefinedAlignment Inner CSS color. if not set, the defaut is colorDark 
Timing Pattern Color options---------------
timingNStringundefinedGlobal Timing CSS color. if not set, the defaut is colorDark 
timing_HNStringundefinedHorizontal timing CSS color 
timing_VNStringundefinedVertical timing CSS color 
Title options---------------
titleNString'' 
titleFontNStringnormal normal bold 16px ArialCSS Font 
titleColorNString#000000CSS color 
titleBackgroundColorNString#ffffffCSS color 
titleHeightNNumber0Title Height, Include subTitle 
titleTopNNumber30draws y coordinates. 
SubTitle options---------------
subTitleNString'' 
subTitleFontNStringnormal normal normal 14px ArialCSS Font 
subTitleColorNString#4F4F4FCSS color 
subTitleTopNNumber0draws y coordinates. default is 0 
Event Handler options---------------
onRenderingStart(qrCodeOptions)NFunctionundefinedCallback function when the rendering start. can use to hide loading state or handling. 
onRenderingEnd(qrCodeOptions, dataURL)NFunctionundefinedCallback function when the rendering ends. dataURL parameter is the base64 data(canvas drawer) or SVG serialized text(svg drawer) of QRCode image(if not support canvas return null). 
Version options---------------
versionNNumber0The 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---------------
tooltipNBooleanfalseWhether set the QRCode Text as the title attribute value of the QRCode div. 
Binary(hex) data model options---------------
binaryNBooleanfalseWhether it is binary mode, default is text mode. 
CORS options---------------
crossOriginNStringnullString which specifies the CORS setting to use when retrieving the image. null means that the crossOrigin attribute is not set. 'anonymous', null. 
UTF-8 options---------------
utf8WithoutBOMNBooleantrueUse UTF-8 without BOM. set to false value will use BOM in UFT-8. 
Drawing method options---------------
drawerNStringcanvasWhich drawing method to use. canvas, svg.Chrome, FF, IE9+.

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 * as QRCode from 'easyqrcodejs';

  export let text;
  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.

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 库或产品的定制开发。请联系我购买商业/企业版本。

Premium demo preview

End

Email：inthinkcolor@gmail.com

http://www.easyproject.cn

Donation/捐助:

支付宝/微信/QQ/云闪付/PayPal 扫码支付
支付宝/微信/QQ/云闪付/PayPal

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

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

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.

Keywords

FAQs

Last updated on 29 Nov 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Mobile, Alabama Hospital Refuses to Pay Settlement in Landmark Ransomware Death Lawsuit

Security News

Mobile, Alabama Hospital Refuses to Pay Settlement in Landmark Ransomware Death Lawsuit

A hospital in Mobile, Alabama, agreed to a settlement in a landmark ransomware death lawsuit, but is now reportedly reconsidering the agreement and refusing to pay.

By Sarah Gooding  -  May 30, 2024
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc