Fabricjs: Saving And Loading Dynamic Patterns From Json (patternsourcecanvas)

I am having a problem saving and loading dynamic patterns that are applied to objects. I have searched online for a solution to this to no avail. I understand why it is happening,

Solution 1:

I have solved my problem with a little workaround. I am not sure if this is the "correct" way to handle dynamic patterns being saved with JSON but it works for me.

Here's what I am doing...

1. Applying the dynamic pattern onto an object.

2. Right before saving the canvas (JSON string) to MongoDB, I am doing 2 things...

   a) Saving the objects information (which include pattern src, width, padding etc.) on one of the fields of the mongoDB document called 'canvasLayers'.

   b) Clearing all the 'fill' properties of the paths that have dynamic patterns applied by setting the 'fill' property to "".

   So the JSON does not include any pattern information when saved to the DB.

3. When loading a previously saved canvas, I am re-applying the patterns based on pattern information that was saved on the 'canvasLayers' field for each object.

Basically, I am not saving the pattern info with the JSON string, but rather storing the pattern data on a separate object (mongodb field), and then re-applying the patterns when the canvas loads.

Solution 2:

Use below code for convert the Image source into the base 64 format and store and reopen the same.

//override toObject of fabric.Patternvar 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);
  } elseif (typeof this.source.src === "string") {
    source = this.source.src;
  } elseif (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);
  returnobject;
};



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 :

<canvasid="canvas"width="300"height="300"></canvas><br><buttonid="loadjson">loadfromjson </button><scriptsrc='https://www.multicastr.com/imageeditor/assets/js/fabric.unmin.js'></script><scriptsrc="https://www.multicastr.com/user/js/jquery.min.js"></script>