Git Product home page Git Product logo

js-qrcode's Introduction

chillerlan/js-qrcode

A javascript port of chillerlan/php-qrcode, a QR Code library based on the implementation by Kazuhiko Arase.

NPM version License CodeCov Build NPM downloads

Overview

Features

  • Creation of Model 2 QR Codes, Version 1 to 40
  • ECC Levels L/M/Q/H supported
  • Mixed mode support (encoding modes can be combined within a QR symbol). Supported modes:
    • numeric
    • alphanumeric
    • 8-bit binary
  • Flexible, easily extensible output modules, built-in support for the following output formats:
    • Markup types: SVG, etc.
    • String types: JSON, plain text, etc.
    • Raster image types via Canvas

Documentation

The API is very similar to the PHP version of this library, and you can refer to its documentation and examples for most parts.

Key differences:

  • Class constants of the PHP version are regular constants here, e.g. QRMatrix::M_DATA becomes M_DATA, Version::AUTO is VERSION_AUTO and EccLevel:L to ECC_L - see index.js for the proper names of all symbols.
  • No multimode support for Kanji and Hanzi character sets (handling/converting non-UTF8 strings in javascript is a mess), no ECI support for the same reason.
  • save-to-file is not supported. You can re-implement the method QROutputAbstract::saveToFile() in case you need it. It's called internally, but it has no function.
  • No QR Code reader included
  • The usual javascript quirks:
    • the internal structure of some classes may deviate from their PHP counterparts
    • key-value arrays become objects, causing inconsistent return values in some cases, not to mention the inconsistent loop types for each (pun intended)
    • numbers may act strange
    • magic getters and setters come with downsides, see this comment

An API documentation created with jsdoc can be found at https://chillerlan.github.io/js-qrcode/ (WIP).

Installation

Via terminal: npm i @chillerlan/qrcode

In package.json:

{
	"dependencies": {
		"@chillerlan/qrcode": "^1.0"
	}
}

Quickstart

Server-side, in nodejs:

import {QRCode} from './dist/js-qrcode-node-src.cjs';

let data   = 'otpauth://totp/test?secret=B3JX4VCVJDVNXNZ5&issuer=chillerlan.net';
let qrcode = (new QRCode()).render(data);

// do stuff
console.log(qrcode);

Client-side, in a webbrowser:

<div id="qrcode-container"></div>
<script type="module">
	import {QRCode} from './dist/js-qrcode-es6-src.js';
	
	// an SVG image as base64 data URI will be returned by default
	let qrcode = (new QRCode()).render('https://www.youtube.com/watch?v=dQw4w9WgXcQ');

	// append it to the DOM
	let img = document.createElement('img');
	img.alt = 'QRCode';
	img.src = qrcode
	
	document.getElementById('qrcode-container').appendChild(img);
</script>

QR codes are awesome!

Have a look in the examples folder for some more usage examples.

License notice

Parts of this code are ported to js (via php) from the ZXing project and licensed under the Apache License, Version 2.0.

Trademark Notice

The word "QR Code" is a registered trademark of DENSO WAVE INCORPORATED
https://www.qrcode.com/en/faq.html#patentH2Title

js-qrcode's People

Contributors

codemasher avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

js-qrcode's Issues

Extending QROptions

Hi,

is it possible with this Javascript implementation to extend the QROptions as can be done with the PHP version? I would like to make circular QR codes with an svg logo in the center, like these examples.

https://github.com/chillerlan/php-qrcode/blob/main/examples/svgWithLogo.php
https://github.com/chillerlan/php-qrcode/blob/main/examples/svgRoundQuietzone.php

If it is possible but requires some custom javascript, I would appreciate a brief example/starting point. If it's not possible I will look for other ways.

Thanks.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.