Question

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

e.g。资产/图像/ 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];

基本上要修剪网址以使其相对。

如果有结构更新，我每次都必须重新申请。我宁愿只是从外部覆盖loadimage，但遇到问题，尝试使用范围，即缓冲区和请求对象。

有人能建议一个干净的方法吗？即没有接触fabric.js 如果网址首先被序列化为亲戚，我会更喜欢。

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

Fabricjs和图片网址的相对路径

1 个答案: