FabricJS 从服务器端的路径加载图像?

FabricJS load image from path at server side?

如何从服务器端的文件加载图像并对其应用滤镜?我需要像下面这样的东西。接收滤镜列表、从路径加载图像、应用滤镜并将图像保存到另一个路径的函数。

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);
    });
  },
}

显然 fabric.Image.fromPath 不存在,所以我正在寻找等效的东西。图片将批量上传,并位于相对于服务器的路径中。我会使用 fromUrl 作为最后的资源,但我想避免提供原始图像。

您可以使用fabric.Image.fromURL,但它会根据 fabricjs 版本略有不同。

在 fabric 2.x 中你可以使用文件路径...

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

在 fabric 3.x 中你需要使用一个文件 url

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