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

【问题标题】：Load images from local directory in Fabric从 Fabric 中的本地目录加载图像
【发布时间】：2020-01-02 22:42:31
【问题描述】：

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

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

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

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

在哪里

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

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

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

我目前正在将图像加载到 2d 画布对象中，将其转换为 canvas.toDataURL() 并将该 url 放入 fabric.Image.fromURL() 有效但是将图像转换为 url 非常慢，因为大图像。一定有办法直接加载图片，避免这个问题。

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

太棒了，这行得通。我从未见过任何使用文件 url 的文档，只有 web.xml 。谢谢。
无论如何，这些都是有效的 URL。但是可以添加到文档中的好点。
我已经尝试使用此代码fabric.Image.fromURL(require('@jewelry/assets/images/card/table.png')，它也可以正常工作，但它需要文件加载器 npm 包，因为我正在处理的项目正在使用 webpack。

【解决方案2】：

试试这个：

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

【讨论】：