Fabricjs:从JSON(tattersourcecanvas)节省和加载动态模式

Question

我有一个问题保存和加载到对象的动态模式。

我已经在线搜索了解决方案，但无济于事。我了解为什么会发生这种情况，但不明白如何解决。

这基本上是我在做的...

1. 将动态模式应用于对象。
2. 使用...'
3. 使用'loadfromjson'
加载画布
4. 获取错误'未介绍的参考文献：未定义的tattersourcecanvas'

我在这个问题上发现的所有内容都可以追溯到至少2年前(有些甚至在2013年(，没有代码的可靠示例。

update

这是我用来应用模式在路径上的功能...

function applyPatternOnPath(p, image, width, patternRepeat, patternPadding) {
    if (patternRepeat) {
      var r = 'repeat'
    } else {
      var r = 'no-repeat'
    }
    fabric.Image.fromURL(image, function(img) {
      var padding = 0 + patternPadding;
      img.scaleToWidth(width);
      var patternSourceCanvas = new fabric.StaticCanvas();
      patternSourceCanvas.add(img);
      patternSourceCanvas.renderAll();
      var pattern = new fabric.Pattern({
        source: function() {
          patternSourceCanvas.setDimensions({
            width: img.getScaledWidth() + padding,
            height: img.getScaledHeight() + padding
          });
          patternSourceCanvas.renderAll();
          return patternSourceCanvas.getElement();
        },
        repeat: r
      });
      p.set('fill', pattern);
      canvas.renderAll();
    }, { crossOrigin: 'Anonymous' });
  }

Answer 1

我已经解决了一些解决方法。我不确定这是否是处理JSON保存的动态模式的"正确"方法，但对我有用。

这是我在做的...

1. 将动态模式应用于对象。

2. 就在将画布(JSON String(保存到MongoDB之前，我正在做2件事...

   a(在MongoDB文档的一个字段上保存对象信息(包括模式SRC，宽度，填充等(，称为" CanvasLayers"。

   b(清除通过将"填充"属性设置为"。

   因此，将JSON保存到DB时不包含任何模式信息。

3. 加载先前保存的画布时，我正在基于在每个对象的" CanvasLayers"字段上保存的模式信息重新应用模式。

基本上，我不是使用JSON字符串保存模式信息，而是将模式数据存储在单独的对象(MongoDB字段(上，然后在画布加载时重新应用模式。

Answer 2

使用以下代码将图像源转换为基本64格式并存储并重新打开相同的源。

//override toObject of fabric.Pattern
var toFixed = fabric.util.toFixed;
fabric.Pattern.prototype.toObject = function(propertiesToInclude) {
  var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS,
    source, object;
  if (typeof this.source === "function") {
    source = String(this.source);
  } else if (typeof this.source.src === "string") {
    source = this.source.src;
  } else if (typeof this.source === "object" && this.source.toDataURL) {
    source = this.source.toDataURL();
  }
  object = {
    type: "pattern",
    source: source,
    repeat: this.repeat,
    crossOrigin: this.crossOrigin,
    offsetX: toFixed(this.offsetX, NUM_FRACTION_DIGITS),
    offsetY: toFixed(this.offsetY, NUM_FRACTION_DIGITS),
    patternTransform: this.patternTransform ? this.patternTransform.concat() : null
  };
  fabric.util.populateWithProperties(this, object, propertiesToInclude);
  return object;
};

var imageUrl = 'https://upload.wikimedia.org/wikipedia/commons/2/22/Wikimapia_logotype.svg';
var canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({
  width: 200,
  height: 200,
  strokeWidth: 2,
  stroke: '#000'
})
canvas.add(rect);
fabric.Image.fromURL(imageUrl, function(img) {
  //alert('t' + img);
  console.log('img', img);
  img.scaleToHeight(200);
  var patternSourceCanvas = new fabric.StaticCanvas();
  patternSourceCanvas.add(img);
  patternSourceCanvas.setDimensions({
    width: img.getWidth(),
    height: img.getHeight()
  });
  patternSourceCanvas.renderAll();
  var pattern = new fabric.Pattern({
    source: patternSourceCanvas.getElement()
  });
  rect.fill = pattern;
  canvas.renderAll();
}, {
  crossOrigin: 'annonymous'
});
$('#loadjson').on('click', function() {
  var json = canvas.toJSON();
  console.log('json', json['objects']);
  canvas.clear();
  setTimeout(function() {
    canvas.loadFromJSON(json, canvas.renderAll.bind(canvas));
  }, 3000)
})

CSS

canvas{
  border:2px solid #000;
}

html：

<canvas id="canvas" width="300" height="300"></canvas><br>
<button  id="loadjson">loadfromjson </button>

<script src='https://www.multicastr.com/imageeditor/assets/js/fabric.unmin.js'></script>
<script src="https://www.multicastr.com/user/js/jquery.min.js"></script>