Unable to add an image using FabricImage

[RobHedley]

Hey Guys,

I am hoping to tap into the collective knowledge. I am new to FabricJS and I am am implementing into a React app. I am using the latest NPM Package 6.4.3 and I am struggling to add an image to the canvas. I have tried a number of way to achieve this and have read through every bit of documentation I can find about the switch to version 6. So far I have tried:

const backImg = new FabricImage(testImage, { left: 0, top: 0, height: 400, width: 500, selectable: false, hasControls: false, hasBorders: false }); canvas.add(backImg)

const backImg = new fabric.FabricImage(testImage, { left: 0, top: 0, height: 400, width: 500, selectable: false, hasControls: false, hasBorders: false }); canvas.add(backImg)

new fabric.FabricImage(testImage).then(function(img) { img.set({ left: 0, top: 0, height: 400, width: 500, selectable: false, hasControls: false, hasBorders: false }); canvas.add(img).setActiveObject(img); })

And a number of variation. I have passed testImage as an image Object and also as a string URL but still I get the same error:

react-dom.production.min.js:143 Uncaught TypeError: Cannot read properties of null (reading 'classList') at n.setElement (Image.ts:236:13) at new n (Image.ts:205:10) at pen.js?key=pen.js-68…-5dd1c1e08137:36:23 at Mb (react-dom.production.min.js:111:280) at Yh (react-dom.production.min.js:121:327) at R (react.production.min.js:11:265) at va (react.production.min.js:12:403) at react.production.min.js:25:14

No matter what I do, I alwats get the same error. I have looked at the image.ts code and it is when it is attempting to add an additional style to the classList of the element. I had originally assumed that I was not passing the image correctly hence it was falling over when it tried to use the object however I notice from the code that is has already completed a number of operation on the element (as it is labeled in image.ts) before it fails on the classList.

I have created a codePen showing the issue:

https://codepen.io/hedlro/pen/gOVLEBa?editors=0110

If you comment out the ImageAdd section (Lines 36 - 44), everything works fine, including the text add using the new FabricText. With the image add (you can see a few examples of what I have tried commented out) back in, when you look at the console you will see the error above.

I am hoping that I am doing something stupid and one of you can point out my error. My next step is to step back to version 5 and follow the documentation to get this finished but I would prefer to stick to version 6.

Thanks in advance guys.

[RobHedley]

I have managed to get round the error outlined above by creating a new image from both the string URL (as shown below) and the imported React Image object:

const testImg = new Image('https://www.yaay.me/assets/img/MerchTSRoundFront.png')

I have tried both:

const backImg = new FabricImage(testImg, { left: 0, top: 0, height: 400, width: 500, backgroundColor: '#ff0000', selectable: false, hasControls: false, hasBorders: false }); canvas.add(backImg);

and

`const backImg = new fabric.FabricImage(testImg,{
left: 0,
top: 0,
height: 400,
width: 500,
backgroundColor: '#ff0000',
selectable: false,
hasControls: false,
hasBorders: false
}
)

canvas.add(backImg)`

I can now add the object to my canvas however the Image does not display. I have checked to make sure I have the width and height etc set and on setting a backgroundColour I can see the object on the canvas minus the image.

As part of my testing with this, I tried rendering the image that I am passing to the FabricImage within the app. If I use the imported react image object then the image will display however this causes the error listed in the discussion above. When I try to render the new image object created using:

const testImg = new Image('https://www.yaay.me/assets/img/MerchTSRoundFront.png')

But this create a HTMLImage Object which cannot be rendered using the image source but does fix the error outlined in the discussion above.

Any help on this would be appreciated as it has currently stopped development on my project.

[RobHedley]

Fixed: The problem was me, sort of.

For those using React and if they get the same issue as outlined above, here are the gotchas that tripped me up:

If you are using an image that is imported into React as an image object i.e.

import testImage from '../assets/images/MerchTSRoundFront.png'

You need create a new Image object using:

const testImgObj = new Image(500, 400) testImgObj.src = testImage;

This will give you an image object with all the required attributes for Fabric.js. Also ensure you set a width and height otherwise you will get a 0 x 0 pixel image. Then add the image to your canvas using the following:

const backImg = new FabricImage(testImgObj, { left: 0, top: 0, height: 400, width: 500, backgroundColor: '#ffff00', selectable: false, hasControls: false, hasBorders: false }); canvas.add(backImg);

Where canvas is your referenced canvas.

I hope that helps.

[asturur]

when you do import testImage from '../assets/images/MerchTSRoundFront.png' since you are importing a png file you are likely getting just a url. So is a string.