DOCSEARCHbyAlgolia
Submit Docs

EasyQRCodeJS

repository·master·Indexed 21 days ago

https://github.com/ushelp/easyqrcodejs

A cross-browser QR code generation library for pure JavaScript that runs in DOM-based client browsers. It supports Canvas, SVG, and Table drawing methods, as well as binary (hex) data mode. The library provides extensive configuration for logos, background images, custom dot styles, and colors. It is compatible with Angular, Vue.js, React, Next.js, and Svelte frameworks. Version 4.6.2.

Tokens
3.3K
Snippets
13
Records
16
Agent score
24%

What's inside easyqrcodejs

  1. Choose the right EasyQRCodeJS version

    master

    Select the package that matches your runtime environment:

    ProjectEnvironmentCapabilities
    EasyQRCodeJSClient-side (Browser, Electron, NW.js)Runs with DOM. Supports Canvas, SVG, and Table drawing.
    EasyQRCodeJS-NodeJSServer-side (NodeJS, Electron, NW.js)Runs without DOM. Saves images to file (PNG/JPEG/SVG) or returns data URL.
    EasyQRCode-React-NativeReact NativeGenerates QR code image or base64 data URL.

  2. Integrate EasyQRCodeJS with Svelte

    master

    To use EasyQRCodeJS in Svelte:

    1. Install via npm: npm install --save-dev easyqrcodejs.
    2. Use bind:this={node} to get a reference to the DOM element.
    3. Initialize the QRCode object inside the onMount lifecycle hook.
    <script>
  import { onMount } from 'svelte';
  import QRCode from 'easyqrcodejs';

  export let codeValue;
  let node;

  onMount(() => {
    const options = {
      text: codeValue,
      width: 100,
      height: 100,
      quietZone: 10,
    };
    new QRCode(node, options);
  });
</script>

<div bind:this={node}></div>

  3. Load EasyQRCodeJS in different environments

    master

    Depending on your project setup, you can load the library using a standard script tag, AMD, or CommonJS (for environments like Electron).

    Script Load (Browser)

    Use a standard <script> tag pointing to the minified file.

    AMD Load

    Configure the path using require.config and load the QRCode module.

    Node.js / Electron Load

    Use require to import the module.

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

  4. Integrate EasyQRCodeJS with Next.js

    master

    To use EasyQRCodeJS in Next.js:

    1. Add easy.qrcode.min.js to your public folder (for Next.js >= 9.1).
    2. Use the next/head component to include the script tag pointing to the public file.
    3. Use React.createRef() to target the DOM element and initialize the QR code in componentDidMount.
    import Head from "next/head";

class About extends React.Component {
  constructor(props) {
    super(props);
    this.qrcodeDOM = React.createRef();
    this.qrcode = null;
  }

  componentDidMount() {
    this.qrcode = new QRCode(this.qrcodeDOM.current, { text: "https://github.com/ushelp/EasyQRCodeJS" });
  }

  render() {
    return (
      <div>
        <div ref={this.qrcodeDOM}></div>
        <Head>
          <script type="text/javascript" src="/easy.qrcode.min.js"></script>
        </Head>
      </div>
    );
  }
}

  5. Integrate EasyQRCodeJS with Angular

    master

    To use EasyQRCodeJS in Angular:

    1. Install via npm: npm install --save easyqrcodejs.
    2. In tsconfig.json, set "esModuleInterop": true.
    3. Use @ViewChild to get a reference to the DOM element and initialize the QRCode object inside the ngAfterViewInit lifecycle hook.
    import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
import QRCode from 'easyqrcodejs';

@Component({
  selector: 'app-root',
  template: '<div #qrcode></div>'
})
export class AppComponent implements AfterViewInit {
  @ViewChild('qrcode', {static: false}) qrcode: ElementRef;

  ngAfterViewInit() {
    var options = {
      text: "https://github.com/ushelp/EasyQRCodeJS"
    };
    new QRCode(this.qrcode.nativeElement, options);
  }
}

  6. Integrate EasyQRCodeJS with Vue.js

    master

    To use EasyQRCodeJS in Vue.js:

    1. Install via npm: npm install --save easyqrcodejs.
    2. Use a ref on the target <div> element.
    3. Initialize the QRCode object within the mounted() lifecycle hook using this.$refs.qrcode.
    import * as QRCode from 'easyqrcodejs';

export default {
  mounted() {
    var options = {
      text: "https://github.com/ushelp/EasyQRCodeJS"
    };
    new QRCode(this.$refs.qrcode, options);
  }
}

  8. Integrate EasyQRCodeJS with React

    master

    To use EasyQRCodeJS in React:

    1. Install via npm: npm install --save easyqrcodejs.
    2. Use React.createRef() to reference the target <div>.
    3. Initialize the QRCode object inside componentDidMount (for Class components) or useEffect (for Functional components).
    // Functional Component Example
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 ref={code}></div>;
}

  9. Configure QRCode options

    master

    The options_object passed to the QRCode constructor supports several categories of configuration:

    Basic Options

    • text: (Required) The string content to encode.
    • width: Width in pixels (default: 256).
    • height: Height in pixels (default: 256).
    • colorDark: Dark CSS color (default: #000000).
    • colorLight: Light CSS color (default: #ffffff).
    • correctLevel: Error correction level using QRCode.CorrectLevel (L, M, Q, or H).

    Logo Options

    • logo: Path or Base64 encoded image for the center logo.
    • logoWidth / logoHeight: Fixed dimensions (defaults to width/3.5).
    • logoMaxWidth / logoMaxHeight: Maximum dimensions (overrides fixed width/height if set).
    • logoBackgroundTransparent: Boolean; if true, logoBackgroundColor is ignored.
    • logoBackgroundColor: Background color for the logo (if not transparent).

    Styling and Patterns

    • dotScale: Scale for the body blocks (0-1.0).
    • quietZone: Size of the quiet zone.
    • quietZoneColor: Background color for the quiet zone.
    • backgroundImage: Path or Base64 image for the background.
    • backgroundImageAlpha: Transparency of the background image (0-1.0).
    • autoColor: Enables automatic color adjustment for data blocks.
    • Position Pattern (Eye) Colors: Use PO (Outer), PI (Inner), or specific corner keys like PO_TL (Top Left) to color the finder patterns.
    • Timing Pattern Colors: Use timing (Global), timing_H (Horizontal), or timing_V (Vertical).

    Text and UI

    • title: Text content for the QR title.
    • subTitle: Text content for the subtitle.
    • titleFont / subTitleFont: CSS font strings.
    • tooltip: Boolean; if true, sets the QR text as the title attribute of the container div.

    Technical Settings

    • version: QR version (1-40). 0 selects automatically based on text length.
    • binary: Boolean; if true, uses binary (hex) mode instead of text mode.
    • drawer: Drawing method, either 'canvas' (default) or 'svg'.
    • utf8WithoutBOM: Boolean; defaults to true.

  10. Handle cross-origin image issues (Tainted Canvas)

    master

    If you are using external images in your QR code, the canvas may become 'tainted', preventing toDataURL (and thus downloading) from working. Use one of these three solutions:

    1. Configure crossOrigin: Set the crossOrigin option to 'anonymous' in your config object. This requires the image server to support CORS.
    2. Same Domain: Host the image on the same domain as your web application.
    3. Base64: Use a Base64 encoded string for the image instead of a URL.
    {
  // String which specifies the CORS setting to use when retrieving the image.
  // 'anonymous' tells the browser to request the image with CORS.
  crossOrigin: 'anonymous',
}

  11. Basic Usage of EasyQRCodeJS

    master

    To generate a QR code, create a container element in your HTML and instantiate the QRCode object by passing the DOM element and an options object containing the text to encode.

    Note: The options object is where you define the content and visual styling of the QR code.

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

  12. Instantiate a QRCode object

    master

    To create a new QR Code, instantiate the QRCode class by passing a DOM element and an options object. The options object allows you to configure the text content, dimensions, colors, and advanced styling like logos or background images.

    var qrcode = new QRCode(DOM_object, options_object);