CODEWITHSUNDEEP
javascripthtml5-canvasfabricjs
M -
M -

Reputation: 28462

Modify fabric.Image.fromURL after initial load using Fabric.js

I'm using theFabric.js library, and I've seen a lot of examples on how to load an image from a URL using Image.fromURL. Almost every example assigns the image to a variable, using this general setup:

var bgnd = new fabric.Image.fromURL(bgndURL, function(oImg){
    oImg.hasBorders = false;
    oImg.hasControls = false;
    // ... Modify other attributes
    canvas.insertAt(oImg,0);
});

I've found that the attributes of the image can only be modified within the callback function when the image finishes loading. Is there a way to modify its attributes at a later time? I tried changing the attributes of the bgnd variable directly but it doesn't do anything.

bgnd.set({left: 20, top: 50});
canvas.renderAll();

or

bgnd.rotation = 45;
canvas.renderAll();

they don't do anything. What's the point of assigning the fabric.Image object to the bgnd variable if this variable can't be accessed at a later time? Or am I using it incorrectly?

Upvotes: 3

Views: 7065

Answers (1)

mathius1
mathius1

Reputation: 1391

After you insert the image using 

canvas.insertAt(oImg,0);

canvas.setActiveObject(oImg);
myImg= canvas.getActiveObject();

You should be able to change it using

myImg.rotation = 45;

Remember to create the myImg variable as a global variable. Outside of the image fromURL function Modify After Load Fiddle

Upvotes: 2

Related Questions