Git Product home page Git Product logo

jsqrcode's Introduction

JavaScript QRCode reader for HTML5 enabled browser.

This project is no more maintained. Explanation : Lazarsoft's qrcode reader is not maintained since 2 years, so I decided to fork it one year ago to fix some issues. However, there are many things missing on this project, such as proper test cases. Also, I still haven't had the time to understand how the qrcode processing really works under the hood. On the other side, a new library called : https://github.com/cozmo/jsQR exists for over a year, is maintained and has multiple test cases. I have personally moved to this library instead.

I'm letting the README as it was before below.

This was started as a port of Lazarsoft’s qrcode reader.

Build Status

Installation

npm install qrcode-reader

Usage

var QrCode = require('qrcode-reader');

Create a new instance of QrCode:

var qr = new QrCode();

Set its callback to a custom function:

qr.callback = function(error, result) {
  if(error) {
    console.log(error)
    return;
  }
  console.log(result)
}

Passing image data in node

You have to use an external imageparser

  1. You can use npm install --save jimp which doesn't have any dependency (runs in pure node).

    var Jimp = require("jimp");
    var buffer = fs.readFileSync(__dirname + '/image.png');
    Jimp.read(buffer, function(err, image) {
        if (err) {
            console.error(err);
            // TODO handle error
        }
        var qr = new QrCode();
        qr.callback = function(err, value) {
            if (err) {
                console.error(err);
                // TODO handle error
            }
            console.log(value.result);
            console.log(value);
        };
        qr.decode(image.bitmap);
    });
  2. You can use npm install --save image-parser, which depends on lwip or graphicsmagick

    var ImageParser = require("image-parser");
    var buffer = fs.readFileSync(__dirname + '/image.png');
    var img = new ImageParser(img);
    img.parse(function(err) {
        if (err) {
            console.error(err);
            // TODO handle error
        }
        var qr = new QrCode();
        qr.callback = function(err, value) {
            if (err) {
                console.error(err);
                // TODO handle error
                return done(err);
            }
            console.log(value.result);
            console.log(value);
        };
        qr.decode({width: img.width(), height: img.height()}, img._imgBuffer);
    });

Passing image data in the browser

Since the browser contains the Image global, we can use it to open images with URL, Data URI, ...

Decode an image by its URL or Data URI:


qr.decode(url or DataURL);

Decode an image by context.getImageData: Works with web workers.


var context = canvas.getContext("2d"); var data = context.getImageData(0, 0, width, height);

qr.decode(data);

====================

If you want, you can build the script yourself.

First clone the repository, then from the directory of this repository, do:


npm install

To run the build process and generate a JavaScript file called dist/index.js you can run from node:


npm run build

To minify dist/index.js and generate dist/index.min.js you should run:


npm run minify

To run the tests:


npm test

Make it work in the browser

The generated file dist/index.js works in the browser.

You will have access to the global variable QrCode if you do the following in your HTML:

```

<script src="dist/index.js"></script> \`\`\`

See examples/browser-upload/index.html for a very basic example using a file upload.

Changelog

See CHANGELOG.md.

jsqrcode's People

Contributors

edi9999 avatar turbo87 avatar lazarsoft avatar backflip avatar tcmiranda avatar adrianmarinica avatar richardsonwtr avatar cseufert avatar iagolast avatar dks17 avatar yamatt avatar noahbass avatar sgoo avatar thulinma avatar rugk avatar

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.