从 Fabric 中的本地目录加载图像

Question

我正在尝试使用节点中的 fabric.js 从本地文件夹加载图像。关于如何执行此操作的最新文档似乎很少。大多数示例使用fabric.Image.fromURL(imageurl)

据我所知，这只适用于网址，不适用于本地路径。如果我错了，请纠正我，但我已经尝试过了

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

抛出错误 Coul not load img: /image/path/img.jpg

在哪里

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

将成功读取文件，i将是一个缓冲区。

加载本地图像的正确方法是什么。我知道有一个，fabric.Image.fromObject但我不知道它想要什么类型的对象。

我目前加载图像成2D Canvas对象，以将其转换canvas.toDataURL()并把该URL到fabric.Image.fromURL()其工作，但将图像转换到一个URL是非常缓慢的，由于大的图像。一定有办法直接加载图片，避免这个问题。

Answer 1

如果您使用的是fabricjs 3+，即使用新的jsdom，您可以使用文件urls！

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

在fabricJS 代码库上查看他们如何处理在浏览器和节点中读取文件以获取视觉测试图像