Node.js new Image() is not defined

[Chayemor]

Node.js v4.2.4

var QRC = require('qrcode-reader');
var reader = new QRC();

reader.callback = function(result){
    console.log(result);
};

reader.decode("alice_shocked.png");

Result: ReferenceError: Image is not defined at decode ... qrcode-reader\dist\index.js:2326

[edi9999]

Can you try it like this :

    c = fs.readFileSync(__dirname + '/image.png');
    p = new PNG(c);

    p.decode(function(data) {

        qr = new QrCode();
        qr.callback = function(result) {

            expect(result).to.equal('Test');
            done();
        }
        qr.decode(p, data);
    });

What qrcode version are you using ?

[acanessa]

I'm having the same error, but I'm feeding base64 encoded string to qr.decode(). Any update on this? Thanks!

[miparnisari]

Same issue. Looks like there is a missing dependency to the 'canvas' module.

[csrgxtu]

i got same error

/home/archer/Downloads/node_modules/qrcode-reader/dist/index.js:2328
        var image = new Image();
                        ^

ReferenceError: Image is not defined
    at decode (/home/archer/Downloads/node_modules/qrcode-reader/dist/index.js:2328:19)
    at Object.<anonymous> (/home/archer/Downloads/test1.js:8:8)
    at Module._compile (module.js:413:34)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Function.Module.runMain (module.js:447:10)
    at startup (node.js:148:18)
    at node.js:405:3

[TravelingTechGuy]

Having the same experience:

var fs = require('fs');
var path = require('path');
var PNG = require('png-js');
var QrCode = require('qrcode-reader');

var file = fs.readFileSync(path.join(__dirname, 'qrcode.png'));
var png = new PNG(file);
var qr = new QrCode();

qr.callback = (result, error) => {
  if(error)
    console.error('error', error); 
  else
    console.log(result);
};

png.decode(data => qr.decode(data));

Throws:

C:\Users\test\qr\node_modules\qrcode-reader\dist\index.js:2328
                var image = new Image();
                                ^

ReferenceError: Image is not defined
    at decode (C:\Users\test\qr\node_modules\qrcode-reader\dist\index.js:2328:19)
    at png.decode.data (C:\Users\test\qr\index.js:16:23)
    at C:\Users\test\qr\node_modules\png-js\png-node.js:309:16
    at C:\Users\test\qr\node_modules\png-js\png-node.js:246:16
    at Inflate.onEnd (zlib.js:227:5)
    at emitNone (events.js:91:20)
    at Inflate.emit (events.js:185:7)
    at endReadableNT (_stream_readable.js:934:12)
    at _combinedTickCallback (internal/process/next_tick.js:74:11)
    at process._tickCallback (internal/process/next_tick.js:98:9)

If I change the last line to png.decode(data => qr.decode(png, data)); as you suggested, I get: error Couldn't find enough finder patterns:0 patterns found

For the record, my test image is 400x400 png, generated on http://goqr.me/ using L error correction.

[edi9999]

I don't know exactly for now how we could be using Image from inside node, and not in the browser build.

In the meantime, you can do something like this before requiring jsqrcode:

npm install canvas

then in your code :

var Canvas = require("canvas");
global.Image = Canvas.Image;

[TravelingTechGuy]

Sorry, did not realize this is a browser-only module. Perhaps a test to throw an error if a user tries running under node is in order:

if (typeof module !== 'undefined' && module.exports) {
  //do something useful, or just throw
 throw 'Module cannot run under Node. Try a browser';
}

[edi9999]

Oh no, it is not a browser only module at all.

Browsers already have image manipulation built into them (because they need to do have a way to decode the images either way), node doesn't have that.

You just need to use one library that handles decoding the images, that could either be the canvas module, or also the png-js module (that's the library we use in our test-suite : https://github.com/edi9999/jsqrcode/blob/master/test/qrcode.js)

[TravelingTechGuy]

As you can see in my code posted above, I did attempt to copy your test, using png-js, and got the error specified.

[edi9999]

I think your code should rather be :

png.decode(data => qr.decode(png, data));

[TravelingTechGuy]

From my question: "If I change the last line to png.decode(data => qr.decode(png, data)); as you suggested, I get: error Couldn't find enough finder patterns:0 patterns found"

[edi9999]

Does it work with other images ? For example the one from the tests ? If yes, can you please share your image ?

[TravelingTechGuy]

It works with your test image, but not with mine. attached.

[TravelingTechGuy]

Ok, I think I found it: I re-saved the same image with 32bit depth (similar to your test image), and now it works! I guess the bit depth is crucial.

Thanks for taking the time to write this module and respond to my issue!

[edi9999]

yes, I also think the bit depth has probably some influence on that.

I'll close this now.

[slidenerd]

Same error guys, is this error because of CANVAS or because of 32 bit depth and how do I find out whats the bit depth and correct the image accordingly? Thanks for your suggestions in advance

    var image = new Image();
                    ^

ReferenceError: Image is not defined
    at QrCode.decode (D:\bots\qrbot\node_modules\qrcode-reader\dist\index.js:3062:21)
    at Object.<anonymous> (D:\bots\qrbot\index.js:200:4)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)

I examined your source code line 3062 index.js under dist var image = new Image(); image.crossOrigin = "Anonymous"; image.onload = (function() {

I dont see you importing this Image constructor from anywhere @edi9999 where is this coming from

[edi9999]

See this : https://github.com/edi9999/jsqrcode/issues/17#issuecomment-230093647

[thousand0001]

var fs = require('fs'); var PNG = require('png-js'); var QrCode = require('qrcode-reader'); var file = fs.readFileSync('./gas01.png'); var png = new PNG(file); var qr = new QrCode(); png.decode(function(data){ qr.callback = (result, error) => { if(error) console.error('error', error); else console.log(result); }; qr.decode(png, data); }) ////// It's running OK, but only for png type

[edi9999]

Yes indeed, that is a big limitation imo too. If you find a better solution that works with more image types, please share !