How to identify fabric js image objects inserted to canvas?

Question

In here there are two images with two different id's.Is there a way to identify the image which are inserted(drag and drop) images to the canvas.(I want to get the id's images that are inserted to the canvas).

I'm trying to sent image details(x,y, width,height) to the database with unique image id. Is there a way to this in fabric js.

 
function initCanvas() {
  $('.canvas-container').each(function(index) {

    var canvasContainer = $(this)[0];
    var canvasObject = $("canvas", this)[0];

    var imageOffsetX, imageOffsetY;

    function handleDragStart(e) {
      [].forEach.call(images, function(img) {
        img.classList.remove('img_dragging');
      });
      this.classList.add('img_dragging');
      var imageOffset = $(this).offset();
      imageOffsetX = e.clientX - imageOffset.left;
      imageOffsetY = e.clientY - imageOffset.top;
    }

    function handleDragOver(e) {
      if (e.preventDefault) {
        e.preventDefault();
      }
      e.dataTransfer.dropEffect = 'copy';
      return false;
    }

    function handleDragEnter(e) {
      this.classList.add('over');
    }

    function handleDragLeave(e) {
      this.classList.remove('over');
    }

    function handleDrop(e) {
      e = e || window.event;
      if (e.preventDefault) {
        e.preventDefault();
      }
      if (e.stopPropagation) {
        e.stopPropagation();
      }
      var img = document.querySelector('.furniture img.img_dragging');
      console.log('event: ', e);

      var offset = $(canvasObject).offset();
      var y = e.clientY - (offset.top + imageOffsetY);
      var x = e.clientX - (offset.left + imageOffsetX);

      var newImage = new fabric.Image(img, {
        width: img.width,
        height: img.height,
        left: x,
        top: y
      });
      canvas.add(newImage);
      return false;
    }

    function handleDragEnd(e) {
      [].forEach.call(images, function(img) {
        img.classList.remove('img_dragging');
      });
    }

    var images = document.querySelectorAll('.furniture img');
    [].forEach.call(images, function(img) {
      img.addEventListener('dragstart', handleDragStart, false);
      img.addEventListener('dragend', handleDragEnd, false);
    });
    canvasContainer.addEventListener('dragenter', handleDragEnter, false);
    canvasContainer.addEventListener('dragover', handleDragOver, false);
    canvasContainer.addEventListener('dragleave', handleDragLeave, false);
    canvasContainer.addEventListener('drop', handleDrop, false);
  });
}
initCanvas();

var canvas = new fabric.Canvas('canvas1', {
  selection: false
});

<div class="fullpage">
  <div class="section">
 
    <div class="canvas-container">
      <canvas id="canvas1" style="border: 1px solid;width: 500px;height: 500px"></canvas>
    </div>
    <div class="furniture" style="padding: 20px;border: 1px solid;width: 460px">
      <h3>Drag the image to canvas</h3> 
      <img id="pic1" draggable="true" src="https://www.mve.com/media/Move_logo_-01.png" width="60">
      <img id="pic2" draggable="true" src="https://young.scot/media/8787/second-chances-logo-802x644.png" width="60">
    </div>
  </div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.6/fabric.min.js'></script>

Answer 1

Use canvas.on('object:modified') function or get active object and perform your action on it

 function initCanvas() {
      $('.canvas-container').each(function(index) {

        var canvasContainer = $(this)[0];
        var canvasObject = $("canvas", this)[0];

        var imageOffsetX, imageOffsetY;

        function handleDragStart(e) {
          [].forEach.call(images, function(img) {
            img.classList.remove('img_dragging');
          });
          this.classList.add('img_dragging');
          var imageOffset = $(this).offset();
          imageOffsetX = e.clientX - imageOffset.left;
          imageOffsetY = e.clientY - imageOffset.top;
        }

        function handleDragOver(e) {
          if (e.preventDefault) {
            e.preventDefault();
          }
          e.dataTransfer.dropEffect = 'copy';
          return false;
        }

        function handleDragEnter(e) {
          this.classList.add('over');
        }

        function handleDragLeave(e) {
          this.classList.remove('over');
        }

        function handleDrop(e) {
          e = e || window.event;
          if (e.preventDefault) {
            e.preventDefault();
          }
          if (e.stopPropagation) {
            e.stopPropagation();
          }
          var img = document.querySelector('.furniture img.img_dragging');
          console.log('event: ', e);

          var offset = $(canvasObject).offset();
          var y = e.clientY - (offset.top + imageOffsetY);
          var x = e.clientX - (offset.left + imageOffsetX);

          var newImage = new fabric.Image(img, {
            width: img.width,
            height: img.height,
            left: x,
            top: y,
            id:'SomeID'
//Object id for identify
          });
          canvas.add(newImage);
          return false;
        }

        function handleDragEnd(e) {
          [].forEach.call(images, function(img) {
            img.classList.remove('img_dragging');
          });
        }

        var images = document.querySelectorAll('.furniture img');
        [].forEach.call(images, function(img) {
          img.addEventListener('dragstart', handleDragStart, false);
          img.addEventListener('dragend', handleDragEnd, false);
        });
        canvasContainer.addEventListener('dragenter', handleDragEnter, false);
        canvasContainer.addEventListener('dragover', handleDragOver, false);
        canvasContainer.addEventListener('dragleave', handleDragLeave, false);
        canvasContainer.addEventListener('drop', handleDrop, false);
      });
    }
    initCanvas();

    var canvas = new fabric.Canvas('canvas1', {
      selection: false
    });

    canvas.on('object:modified', function (e) {
    var activeobject = e.target;
    //Do as need 
console.log(activeobject);

    alert(activeobject.get('id'));

                                });

Answer 2

You can get the id from dragged element, and add as a proerty of image object.

function initCanvas() {
  $('.canvas-container').each(function(index) {

    var canvasContainer = $(this)[0];
    var canvasObject = $("canvas", this)[0];

    var imageOffsetX, imageOffsetY;

    function handleDragStart(e) {
      [].forEach.call(images, function(img) {
        img.classList.remove('img_dragging');
      });
      this.classList.add('img_dragging');
      var imageOffset = $(this).offset();
      imageOffsetX = e.clientX - imageOffset.left;
      imageOffsetY = e.clientY - imageOffset.top;
    }

    function handleDragOver(e) {
      if (e.preventDefault) {
        e.preventDefault();
      }
      e.dataTransfer.dropEffect = 'copy';
      return false;
    }

    function handleDragEnter(e) {
      this.classList.add('over');
    }

    function handleDragLeave(e) {
      this.classList.remove('over');
    }

    function handleDrop(e) {
      e = e || window.event;
      if (e.preventDefault) {
        e.preventDefault();
      }
      if (e.stopPropagation) {
        e.stopPropagation();
      }
      var img = document.querySelector('.furniture img.img_dragging');
      //console.log('event: ', e);

      var offset = $(canvasObject).offset();
      var y = e.clientY - (offset.top + imageOffsetY);
      var x = e.clientX - (offset.left + imageOffsetX);

      var newImage = new fabric.Image(img, {
        width: img.width,
        height: img.height,
        left: x,
        top: y,
        id: img.id
      });
      canvas.add(newImage);
      console.log(newImage.id)
      return false;
    }

    function handleDragEnd(e) {
      [].forEach.call(images, function(img) {
        img.classList.remove('img_dragging');
      });
    }

    var images = document.querySelectorAll('.furniture img');
    [].forEach.call(images, function(img) {
      img.addEventListener('dragstart', handleDragStart, false);
      img.addEventListener('dragend', handleDragEnd, false);
    });
    canvasContainer.addEventListener('dragenter', handleDragEnter, false);
    canvasContainer.addEventListener('dragover', handleDragOver, false);
    canvasContainer.addEventListener('dragleave', handleDragLeave, false);
    canvasContainer.addEventListener('drop', handleDrop, false);
  });
}
initCanvas();

var canvas = new fabric.Canvas('canvas1', {
  selection: false
});

<div class="fullpage">
  <div class="section">
 
    <div class="canvas-container">
      <canvas id="canvas1" style="border: 1px solid;width: 500px;height: 500px"></canvas>
    </div>
    <div class="furniture" style="padding: 20px;border: 1px solid;width: 460px">
      <h3>Drag the image to canvas</h3> 
      <img id="pic1" draggable="true" src="https://www.mve.com/media/Move_logo_-01.png" width="60">
      <img id="pic2" draggable="true" src="https://young.scot/media/8787/second-chances-logo-802x644.png" width="60">
    </div>
  </div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.6/fabric.min.js'></script>