Fabricjs 和图像 url 的相对路径

Question

当 fabricjs 序列化 Canvas 时，它会将图像 src url 存储为完整路径，即使 Assets 是(并且被加载为)相对于服务器。

例如 Assets /图像/someimage.png

最终为 http://myserver.com/assets/images/someimage.png

我导出 Canvas json 以加载到需要本地文件系统的相对 url 的混合移动应用程序中。 (并且不想知道配置 Canvas 内容的服务器的 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 有更新，我每次都必须重新应用。我宁愿只从外部覆盖 loadimage，但在尝试使用范围(即 Buffer 和请求对象)时遇到了问题。

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

Answer 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);