Fabricjs 和图像 url 的相对路径答案

【问题标题】：Fabricjs and relative paths for image urlsFabricjs 和图像 url 的相对路径
【发布时间】：2016-10-28 15:20:56
【问题描述】：

当fabricjs 序列化一个画布时，它会将图像src url 存储为完整路径，即使资产在服务器上是（并且被加载为）相对的。

例如资产/图像/someimage.png

以http://myserver.com/assets/images/someimage.png结束

我导出画布 json 以加载到需要本地文件系统的相对 URL 的混合移动应用程序中。（并且不想知道配置画布内容的服务器的 url）

我的秘诀在于更改 fabric.js：

loadImage: function(url, callback, context, crossOrigin) {
    if (!url) {
        callback && callback.call(context, url);
        return;
    }
    // HACK: force relative
    url = 'assets'+url.split('assets')[1];

基本上是修剪 url 以使其相对。

如果面料有更新，我每次都必须重新应用。我宁愿只从外部覆盖加载图像，但在尝试使用范围时遇到问题，即缓冲区和请求对象。

任何人都可以提出一种干净的方法吗？即不接触fabric.js 如果首先将 url 序列化为相对，我会更喜欢。

【问题讨论】：

标签： fabricjs

【解决方案1】：

更好的方法是覆盖 Image 类中的 toObject。这样，当您的图像被序列化时，src 以相对方式存储，而不是在加载图像时更改 url（另外，您不必修改 Fabric 库，这绝不是一个好主意）。

fabric.Image.prototype.toObject = (function(toObject) {
  return function() {
    return fabric.util.object.extend(toObject.call(this), {
      src: 'assets'+this.getSrc().split('assets')[1];
    });
  };
})(fabric.Image.prototype.toObject);

【讨论】：

【解决方案2】：

2022 年更新：

现在通过设置图像属性srcFromAttribute: true (https://github.com/fabricjs/fabric.js/pull/5484) 原生支持

fabric.Image.fromURL('assets/images/someimage.png', function(myImg) {
  const img1 = myImg.set({ left: 0, top: 0, srcFromAttribute: true });
  canvas.add(img1);
});

【讨论】：