Reputation: 51
I am trying to use this package merge-images to layer images (that I currently have in a temp folder) on top of each other and display it on my localhost webpage.
This is my code:
const mergeImages = require('merge-images');
const { Canvas, Image } = require('canvas');
function MyImage() {
mergeImages([
'../../../Temp/base/ffa3bb.png',
'../../../Temp/trait/blur/variant_1/8abfff.png',
'../../../Temp/trait/blur/variant_2/f8f88c.png',
'../../../Temp/lines.png'],
{
Canvas: Canvas,
Image: Image
})
.then(b64 => document.querySelector('img').src = b64);
return (
<img src={Image} />
);
}
export default MyImage;
And I'm getting this error:
TypeError: mergeImages is not a function
But when I go to the definition of mergeImages I see that it is a function:
declare function mergeImages(sources: mergeImages.ImageSource[], options?: mergeImages.Options): Promise<string>;
I am fairly confident I have no idea what I'm doing and my mistake is likely stupid, and I probably have other mistakes any help is greatly appreciated.
Upvotes: 1
Views: 595
Reputation: 29109
If you are importing an es6
module, it might exported as default
. The documentation uses es6
as the example, and that implies it is exported as default
.
import mergeImages from 'merge-images';
So you might try
const mergeImages = require('merge-images').default;
One way to be sure is to log the item right after importing it, then inspect in the console.
const mergeImages = require('merge-images')
console.log('mergeImages', mergeImages)
Upvotes: 4