CODEWITHSUNDEEP
javascriptfabricjs
Zakir
Zakir

Reputation: 95

is it possible in fabric.js to load json with different image source.?

I am trying to create a ID-card application using fabric.js. So the plan is to create the design of the id card. using default name, image, address. etc. and then apply that design to different employees.

So what I have achieved so far is 1) the designing part 2) saving the canvas in JSON 3) reload the canvas form json

I will be fetching the employee information from the database and will display employee name in a drop-down. as i select the employee name from the drop-down i want the canvas to be replaced with employee information...

I got an example which loads the canvas from json and changes the property like height, width etc. is it possible to change the actual content itself like image source 

canvas_.loadFromJSON(JSON.parse(json_data), function(obj) {
  canvas_.renderAll();
  //console.log(' this is a callback. invoked when canvas is loaded!xxx ');
  canvas_.forEachObject(function(obj) {
    //console.log(obj.type);
    if (obj.type === 'image') {
      obj.set({
        left: 100,
        top: 200,
        height: 700,
        width: 700,
        scaleX: .35,
        scaleY: .35,
        lockScalingY: .35
      });
      canvas_.add(obj);
    }
  });
});

Upvotes: 2

Views: 2072

Answers (1)

Durga
Durga

Reputation: 15604

You can use the reviver of loadFromJSON() to get the object and then change source of image using setSrc.

canvas.loadFromJSON(JSON.parse(json_data), canvas.renderAll.bind(canvas), function(o, object) {
  if (object.type == 'image') {
    object.setSrc(url, canvas.renderAll.bind(canvas))
  }
});

Upvotes: 4

Related Questions