CODEWITHSUNDEEP
javascriptnode.jsfabricjs
geckos
geckos

Reputation: 6279

FabricJS load image from path at server side?

How can I load a image from a file in server side and apply filters to it? I need something like the bellow. A function that receives a list of filters, and load a image from a path, apply the filters and save the image to another path.

const fabric = require('fabric').fabric;
const fs = require('fs');
const imageSize = require('image-size');

module.exports = {
  applyFilters(filters, imagePath, outputPath) {
    const out = fs.createWriteStream(outputPath);
    const { width, height } = imageSize(imagePath);
    const canvas = fabric.createCanvasForNode(null, { width, height });
    fabric.Image.fromPath(imagePath, function(img) {
      for (const filter of filters) {
        img.filters.push(filter)
      }
      img.applyFilters();
      canvas.add(img);
    });
    const stream = canvas.createPNGStream();
    stream.on('data', function(chunk) {
      out.write(chunk);
    });
  },
}

Obviously fabric.Image.fromPath doesn't exists, so I'm searching for something equivalent. The images will be uploaded in a bulk, and will be in a path relative to the server. I would use fromUrl as a last resource but I would like to avoid serving the original images.

Upvotes: 0

Views: 1571

Answers (1)

Rob
Rob

Reputation: 12872

You can use fabric.Image.fromURL but it's slightly different depending on fabricjs version.

In fabric 2.x you can use the file path...

fabric.Image.fromURL('/path/to/image.png', img => { ... });

In fabric 3.x you need to use a file url

fabric.Image.fromURL('file:///path/to/image.png', img => { ... });

Upvotes: 2

Related Questions