CODEWITHSUNDEEP
node.jsfabricjs
SpeedOfRound
SpeedOfRound

Reputation: 1278

Load images from local directory in Fabric

I am trying to load images from a local folder using fabric.js in node. There seems to be very little up to date documentation on how to do this. Most example use fabric.Image.fromURL(imageurl)

As far as I'm aware, this only works for web urls, not local paths. Correct me if I'm wrong, but I have tried

fabric.Image.fromURL(imgpath, (img) => {
    ...
}

which throws the error Coul not load img: /image/path/img.jpg

Where

fs.readFile(imagepath, (err, i) => {
   ...
})

will successfully read the file, i will be a buffer.

What is the correct way to load a local image. I know there is a fabric.Image.fromObject but I have no idea what type of object it wants.

I am currently loading the image into a 2d canvas object, converting it with canvas.toDataURL() and putting that url into fabric.Image.fromURL() which works but converting the image to a url is very slow due to large images. There must be a way to load the image directly and avoid this problem.

Upvotes: 1

Views: 4586

Answers (2)

Fateme Amere
Fateme Amere

Reputation: 11

try this one:

    fabric.Image.fromURL(require("../../assets/mockup/100.png"), (img) => {...}

Upvotes: 0

AndreaBogazzi
AndreaBogazzi

Reputation: 14731

If you are using fabricjs 3+, that uses the new jsdom, you can use the file urls!

fabric.Image.fromURL(file://${__dirname}${filepath});

Check here on the fabricJS codebase how they handle reading files in browser and node for the visual test images

https://github.com/fabricjs/fabric.js/blob/master/test/lib/visualTestLoop.js#L139

Upvotes: 9

Related Questions