Javascript 如何识别插入画布的fabric js图像对象？

在这里有两个具有两个不同id的图像。是否有方法识别插入（拖放）到画布的图像（我想获取插入到画布的id图像）

我正在尝试使用唯一的图像id将图像细节（x、y、宽度、高度）发送到数据库。在fabric js中是否有方法实现这一点

函数initCanvas（）{
$（'.canvas container'）。每个（函数（索引）{
var canvasContainer=$（此）[0]；
var canvasObject=$（“画布”，this）[0]；
var imageOffsetX，imageOffsetY；
函数handleDragStart（e）{
[]forEach.call（图像、函数（img）{
img.classList.remove（'img_拖动'）；
});
this.classList.add（'img_拖动'）；
var imageOffset=$（this.offset（）；
imageOffsetX=e.clientX-imageOffset.left；
imageOffsetY=e.clientY-imageOffset.top；
}
功能手柄（e）{
如果（如默认）{
e、 预防默认值（）；
}
e、 dataTransfer.dropEffect='copy'；
返回false；
}
功能手柄输入（e）{
this.classList.add（'over'）；
}
功能手柄（e）{
this.classList.remove（'over'）；
}
函数handleDrop（e）{
e=e | | window.event；
如果（如默认）{
e、 预防默认值（）；
}
如果（如停止播放）{
e、 停止传播（）；
}
var img=document.querySelector（'.furniture img.img_拖动'）；
console.log（'event:'，e）；
var offset=$（canvasObject.offset（）；
变量y=e.clientY-（offset.top+imageOffsetY）；
var x=e.clientX-（offset.left+imageOffsetX）；
var newImage=newfabric.Image（img{
宽度：img.width，
高度：img.height，
左:x,，
顶部：y
});
canvas.add（newImage）；
返回false；
}
功能手柄（e）{
[]forEach.call（图像、函数（img）{
img.classList.remove（'img_拖动'）；
});
}
var images=document.queryselectoral（'.furniture img'）；
[]forEach.call（图像、函数（img）{
img.addEventListener（'dragstart'，handleDragStart，false）；
img.addEventListener（'dragend'，handleDragEnd，false）；
});
canvasContainer.addEventListener（'dragenter'，handleDragEnter，false）；
canvasContainer.addEventListener（'Dragver'，handleDragOver，false）；
canvasContainer.addEventListener（'dragleave'，handleDragLeave，false）；
canvasContainer.addEventListener（'drop'，handleDrop，false）；
});
}
initCanvas（）；
var canvas=new fabric.canvas（'canvas1'{
选择：false
});

将图像拖到画布上
您可以从拖动的元素中获取id，并将其添加为图像对象的属性


函数initCanvas（）{
$（'.canvas container'）。每个（函数（索引）{
var canvasContainer=$（此）[0]；
var canvasObject=$（“画布”，this）[0]；
var imageOffsetX，imageOffsetY；
函数handleDragStart（e）{
[]forEach.call（图像、函数（img）{
img.classList.remove（'img_拖动'）；
});
this.classList.add（'img_拖动'）；
var imageOffset=$（this.offset（）；
imageOffsetX=e.clientX-imageOffset.left；
imageOffsetY=e.clientY-imageOffset.top；
}
功能手柄（e）{
如果（如默认）{
e、 预防默认值（）；
}
e、 dataTransfer.dropEffect='copy'；
返回false；
}
功能手柄输入（e）{
this.classList.add（'over'）；
}
功能手柄（e）{
this.classList.remove（'over'）；
}
函数handleDrop（e）{
e=e | | window.event；
如果（如默认）{
e、 预防默认值（）；
}
如果（如停止播放）{
e、 停止传播（）；
}
var img=document.querySelector（'.furniture img.img_拖动'）；
//console.log（'event:'，e）；
var offset=$（canvasObject.offset（）；
变量y=e.clientY-（offset.top+imageOffsetY）；
var x=e.clientX-（offset.left+imageOffsetX）；
var newImage=newfabric.Image（img{
宽度：img.width，
高度：img.height，
左:x,，
上图：y，
id:img.id
});
canvas.add（newImage）；
console.log（newImage.id）
返回false；
}
功能手柄（e）{
[]forEach.call（图像、函数（img）{
img.classList.remove（'img_拖动'）；
});
}
var images=document.queryselectoral（'.furniture img'）；
[]forEach.call（图像、函数（img）{
img.addEventListener（'dragstart'，handleDragStart，false）；
img.addEventListener（'dragend'，handleDragEnd，false）；
});
canvasContainer.addEventListener（'dragenter'，handleDragEnter，false）；
canvasContainer.addEventListener（'Dragver'，handleDragOver，false）；
canvasContainer.addEventListener（'dragleave'，handleDragLeave，false）；
canvasContainer.addEventListener（'drop'，handleDrop，false）；
});
}
initCanvas（）；
var canvas=new fabric.canvas（'canvas1'{
选择：false
});

将图像拖到画布上
使用canvas.on（'object:modified'）函数或获取活动对象并对其执行操作

 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'));

                                });

var img=document.querySelector（'.furniture img.img_拖动'）；console.log（'event:'，img.id）try@Durga是的，这样我可以输入图像id。但在我的应用程序中，我可以添加多个图像并将它们保存到数据库中。以您的方式，在添加多个图像后，我无法获取id。您如何获取图像的左侧、顶部、宽度和高度，同时对数据库进行排序？首先，我将这些值获取到字符串数组并发送到数据库检查答案，您可以将id添加到图像对象。