Fabric.js - customized Fabric.Image class don't work at "loadFromJSON">"fromObject"

Question

I'd like to save customized Fabric.Image class as JSON, and then later restore it with loadFromJSON.

I have looked up the following question Fabric.js - how to save canvas on server with custom attributes But it seems that the part of "fromObject" is not going well.

It happens when you press the 'Click' button on the following WEB page. https://onoderayuuki.github.io/tana_motif/index.html

[subclass]

 fabric.customMotif = fabric.util.createClass(fabric.Image, {
  type: 'customMotif',
  borderColor: '#19310B',
  cornerColor: '#19310B',
  cornerSize: 20,

 initialize: function(src, options) {
   this.callSuper('initialize', options);
   options && this.set('name', options.name);
   this.image = new Image();
   this.top = options.top;
   this.left = options.left;
   this.image.src = src;
   this.image.onload = (function() {
     this.width = this.image.width;
     this.height = this.image.height;
     this.loaded = true;
     this.setCoords();
     this.fire('image:loaded');
   }).bind(this);
 },

  toObject: function(options) {
       return fabric.util.object.extend(this.callSuper('toObject'), {
       });
  },
  _render: function(ctx) {
   if (this.loaded) {
      ctx.drawImage(this.image, -this.width / 2, -this.height / 2);
   }
  }
});

fabric.customMotif.fromObject = function(object, callback) {
  fabric.util.loadImage(object.src, function(img) {
    callback && callback(new fabric.customMotif(img, object));
  });
};

[JSON]

  canvasState = JSON.stringify(canvas);
  canvas.loadFromJSON(canvasState);

thanks.

score 0 · Accepted Answer · answered Oct 25 '18 at 11:04

If you check this function you will that the first letter of the class is uppercase.

getKlass: function(type, namespace) {
  // capitalize first letter only
  type = fabric.util.string.camelize(type.charAt(0).toUpperCase() + type.slice(1));
  return fabric.util.resolveNamespace(namespace)[type];
},

Rename the class from fabric.customMotif to fabric.CustomMotif

Fabric.js - customized Fabric.Image class don't work at "loadFromJSON">"fromObject"

1 Answers1