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

Question

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

据我所知，这仅适用于网络 urls，不适用于本地路径。如果我错了请纠正我，但我试过了

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 代码库，它们如何处理浏览器和节点中的读取文件以获取可视化测试图像

Answer 2

试试这个：

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

Load images from local directory in Fabric