How to select programmatically one image within set of images in Fabric.js rendered

Question

There are multiple images in the canvas how to select one programmatically in fabric js

fabric.Image.fromURL(this.imageSrc, (img) => {
      let oImg = img.set({
        left: 0,
        top: 0,
        angle: 0,
      }).scale(1);
this.canvas.add(oImg).renderAll();

score 0 · Answer 1 · answered Jul 15 '21 at 22:15

0

You can assign an image to a variable like this:

var oImg;
fabric.Image.fromURL(this.imageSrc, (img) => {
  oImg = img.set({
    left: 0,
    top: 0,
    angle: 0
  });
  canvas.add(oImg).renderAll();
});

Since the image object is now stored as oImg, you can select it like this:

canvas.setActiveObject(oImg);

Or, you can select objects in the canvas based on their index like this:

var obj = canvas.item(0);
canvas.setActiveObject(obj);

answered Jul 15 '21 at 22:15

melchiar

2,782
16
27

thank you for the answer .is there any way of using id for that? – chathura jayaranga Jul 17 '21 at 14:13
This should help https://stackoverflow.com/questions/40191597/fabric-js-select-object-by-id-programmatically/40196417 – melchiar Jul 17 '21 at 16:43
Actually I need to do some photoshop like layer listing and order changing for images with canvas is there any way of using this fabricjs or any recommendation.? – chathura jayaranga Jul 18 '21 at 19:08

How to select programmatically one image within set of images in Fabric.js rendered

1 Answers1