TypeError: options.Canvas is not a constructor

[cphoenix0]

I am running node, and am attempting to merge two images with this code:

const mergeImages = require('merge-images');
const Canvas = require('canvas');

mergeImages(["img1.png", "img2.png"],
     {
        Canvas: Canvas
      })
      .then(b64 => function()
      {
      //Do stuff
      });

However, the above gives an error:

(node:19271) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): TypeError: options.Canvas is not a constructor

I saw this, but after changing my code to const Canvas = require('canvas').Canvas;, like was suggested, I got another error:
TypeError: Image is not a constructor
Like was suggested in the issue above, I tried downgrading to canvas 1.6.13, but that resulted in:
ReferenceError: window is not defined

Not sure if it's me, merge-images. or canvas that's causing the issue.

[mkhizeryounas]

The canvas library is updated. Making a pull request for the issue. commit #66

[lukechilds]

Does this resolve the issue: #23

[mkhizeryounas]

Yes!

[socks4penguins]

I'm also getting the "TypeError: Image is not a constructor" error message. (with require('canvas').Canvas)

Windows 7
Node v.10.9.0

[mkhizeryounas]

I made some changes in the default library. You can get it from

npm install --save https://github.com/mkhizeryounas/merge-images/tarball/master

require(“node_modules/merge-images/src/”)

[socks4penguins]

@mkhizeryounas - That gave me Error: Cannot find module '../build/Release/canvas.node'.

I'm using a Yarn flat install

[lukechilds]

Sorry guys, been super busy recently, been really struggling to fit OSS work in. #23 has the fix for canvas@2. I wrote it ages ago but didn't merge it because the canvas v2 API wasn't finalised yet.

Will double check that now and merge it in if everything's good.

[lukechilds]

Ok, so bad news is that it looks like the node-canvas API has changed quite a bit since I wrote that v2 fix. I updated that PR to test against the latest v2 node-canvas release and a few tests are failing: https://travis-ci.org/lukechilds/merge-images/builds/449301685

However the good news is that it looks like node-canvas v2 includes a browser API shim so I can use the node-canvas API in the browser and Node.js. This will make things simpler as currently, I'm juggling both the node-canvas v1 and browser canvas API's which are different. I can just drop support for node-canvas v1 and use the same API for browser and node-canvas v2.

So there's a bit more effort involved to get that PR merged and working with the latest node-canvas release but shouldn't be too much work. I will try and take a look at this tomorrow.

[noahwaldner]

what is the state of this? i'm having the same issue

[lukechilds]

It requires some changes to this library to be compatible with node-canvas v2. I'm very busy with paid work at the moment so don't have time to work in it right now.

Using node-canvas v1 should work for now.

[lakshyabatman]

Hey, I'm getting the same issue while using merge-images , is this issue not resolved yet?

[lukechilds]

No not yet, for now you'll need to either use node-canvas v1 or submit a PR to make merge-images work with node-canvas v2.

[lakshyabatman]

Okay.

[niypoo]

@lukechilds
hello , everyone I have faced this issue and saw the code , the solution is
you have to
1- require const Canvas = require('canvas');
2- pass the Canvas as option like {Canvas: Canvas}
3- go to a file called index.umd.js into the node_modules/merge-images/... and make this change new options.Canvas.Canvas() at line 25 instead new options.Canvas()
thanks,

[lukechilds]

@niypoo if you have a working solution a PR would be great.

[niypoo]

@lukechilds sorry but what do you mean by "solution PR" ?

[lukechilds]

@niypoo I just mean if you have a working solution it would be great if you can submit a pull request.

[TheDropOne]

@lukechilds Hi, I've updated your code according to @niypoo changes, it works fine for me, please check this out
#72

[MarcGodard]

Does anyone one have a working fork with the new canvas v2? This project looks dead to me and I like this lib. I can no longer get the v1 canvas working since my mac updated.

[mkhizeryounas]

@MarcGodard Yes, try https://github.com/mkhizeryounas/merge-images/

[MarcGodard]

@mkhizeryounas Thanks, will let you know if I find anything. Somehow I am getting Error: Cannot find module 'merge-images', but need to end working for today, will play more with it tomorrow.

[MarcGodard]

I bit the bullet and worked later and did this:

#75

[weekendchallenges]

It should help:

const {Canvas,Image}=require('canvas');
Canvas.Image=Image;

[MarcGodard]

@weekendchallenges you mean in my PR?

[weekendchallenges]

@weekendchallenges you mean in my PR?

No, I meant the official project from npm, which I installed today.

[salekh]

I created a Typescript version of the project, that fixes the canvas issue. If it interests anyone, please feel free to use it:
https://gist.github.com/salekh/ff93b39b580137290dae6715da704576

[MarcGodard]

@salekh https://www.npmjs.com/package/merge-images-v2 that also is a fixed version

[lukechilds]

Apologies for lack of maintenance on this package. Is there anyone with reputable experience using this package that wants me to add them as a maintainer so they can get this finished up?

Unfortunately I have had a lot going on in my personal life and have just not been able to stay on top of open source.

To be clear, I'm not just going to add anyone, I've done that before and it ended up causing even more work and stress for me. But I'd be happy to add someone to the project with experience maintaining open source projects or some sort of reputable background.

Seems counter intuitive to have all these forks with added nuggets of functionality all over the place. Completely my fault I know. But if someone want's to help bring everything together in this package I'm all ears.

[MarcGodard]

@lukechilds I would like too, but I have a new baby on the way so my time will be very limited soon. I really didn't want to fork it, and I waited a while before doing so. I did make many improvements to my fork, but there is a lot more that is needed. I help with a lot of open source projects and would love to upgrade this package but not any time soon.

[lukechilds]

No problem, thanks for weighing in @MarcGodard totally understand.

Congrats on the little one! 👶🎉

[MarcGodard]

If you find the right candidate, and when the updates are done, I will remove my fork.

[pRoy24]

Hey I found this library through Google and ran into this issue ...I am in Chiang Mai too :)

[MarcGodard]

@pRoy24 https://www.npmjs.com/package/merge-images-v2 this is a temporary fix