Using Fabric.js, when an image is scaled, how do you replace it with another image?

Question

I'm building a new version of my online t-shirt designer using FabricJS to replace an existing Flash one that I created several years ago.

I've run into a problem that I need help with. All images that I work with are raster images. When I scale an image or make changes to it such as recoloring it, I make a call to the server to create the new image and then I need to be able to replace the existing image on the canvas.

The only way I've been able to figure out how to do it is by using the canvas method getActiveObject(). This works fine, but if you have multiple objects selected, you don't know which one to update.

When the image is originally added to the canvas, I'm attaching an onModified event handler to it. Only when the scale of the image changes, do I call the server side script to generate the new image. The code I'm currently using is listed below. Any help would be greatly appreciated.

Thanks

fabric.Image.fromURL(previewPath, function (img) {
var sprite = img.set({ left: leftX, top: topY, angle: angle, borderColor: 'black', cornerColor: 'red', cornerSize: 6, transparentCorners: false });
$scope.canvas.add(sprite);
$scope.canvas.renderAll();
sprite.on('modified', function () {
    // Modified event is only executed for scaling
    if (1 != sprite.scaleX.toString() || 1 != sprite.scaleY.toString()) {

        fabric.Image.fromURL(previewPath, function (img) {
            var newSprite = img.set({ left: leftX, top: topY, angle: angle, width: width, height: height });

            // Replaces visible object on canvas


            // Since new image is replacing old one, need to set the scale back to 1
            sprite.scale(1);

            $scope.canvas.renderAll();
        });


    }
});

Answer 1

Not sure if I've read it correctly, but wouldn't you be able to add an extra property to the fabric object when it is created indicating what it is and then use that to figure out which object to remove?

eg in the above, you'd do sprite.objectName = "tshirtSleeves", then when you get new t-shirt sleeves, get the fabric object with objectName = "tshirtSleeves" and remove that.

Answer 2

You could loop through all of the objects on the canvas, check that it's an image, and then make your image changes there as needed.

This option of course has it's possible efficiency issues if you have a lot of non-image objects on the canvas. But it's an option.

You do need to do a renderAll after this of course.

var objects = document.getElementById('canvasId').fabric._objects;

jQuery.each( objects, function( key, eachObject ) {
  if( eachObject.type == "image" ) {
    //Perform scale and image replacement as needed here
  }
});

$scope.canvas.renderAll();

Answer 3

Actually turned out to be pretty simple. Just pass the new image url to the setSrc method of the image object as below.

sprite.setSrc(previewPath, function (img) {
     sprite.scale(1);
     $scope.canvas.renderAll();
});