Node.js fails to generate qr with custom png

[JT Houk]

I'm trying to set this generator up on node, but it fails with the error:

TypeError: Image or Canvas expected

at line 1493 of awesome-qr-node.js: context.drawImage(imgEl, 0, 0);

I have this set up in my server like this:

        const AwesomeQR = require('awesome-qr');
        const {Image} = require('canvas');

        const backgroundImage = new Image();
        backgroundImage.src = path.resolve(__dirname, '../src/assets/logos/akkadu-logo-outer-solid-100.png');
        console.log('---->', backgroundImage); // returns [Image:100x101 /Users/terminallychill/Sites/Akkadu/Akkadu_Cloud_Presentation/src/assets/logos/akkadu-logo-outer-solid-100.png complete]

        const image = {};

        new AwesomeQR().create({
          text: 'https://www.google.com',
          size: 250,
          backgroundImage,
          // autoColor: true,
          callback: (data) => {
            if (!data) {
              console.log('failed to generate the QR code');
            } else {
              image.data = data;
              // play with binary PNG data
            }
          },
        });

Without the backgroundImage, the qr code generates just fine, so I'm wondering if there is a problem/workound with the canvas module?

[JT Houk]

Workaround:

        const AwesomeQR = require('awesome-qr');
        const {Image} = require('awesome-qr/node_modules/canvas');

        const backgroundImage = new Image();
        backgroundImage.src = path.resolve(__dirname, '../src/assets/logos/akkadu-logo-outer-solid-100.png');
        console.log('---->', backgroundImage); // returns [Image:100x101 /Users/terminallychill/Sites/Akkadu/Akkadu_Cloud_Presentation/src/assets/logos/akkadu-logo-outer-solid-100.png complete]

        const image = {};

        new AwesomeQR().create({
          text: 'https://www.google.com',
          size: 250,
          backgroundImage,
          // autoColor: true,
          callback: (data) => {
            if (!data) {
              console.log('failed to generate the QR code');
            } else {
              image.data = data;
              // play with binary PNG data
            }
          },
        });

Seems there's a problem with importing a separate node-canvas module into a project, so you'll have to import the same one from awesome-qr to work. Works fine for me, should update the documentation to include this caveat for as long as it's a problem with node-canvas.

harthur/kittydar#20 (comment)

[Bramzor]

Thanks! Workaround fixed it for me. Should be added to the readme file as it took me some time before I checked the issues here.