如何在Fabric js组对象中获取单个对象参数

Question

在我的应用程序中，我计划保存插入画布的对象的各个细节。我必须使用图像和文本字段创建一个组对象。当我将图像拖放到画布上时，它作为一个组工作，因为我希望它将两个对象都表现为一个。但是，当我保存插入的对象详细信息（周长）时，我想获取对象的单个详细信息。保存分组对象时，它将另存为单独的对象（图像和文本字段）。有办法吗？

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
      });
      var t1 = new fabric.IText('Sample text', {
        fontSize: 11,
        left: x,
        top: y + 50,
        textAlign: 'left',
        width: 150,
        fixedWidth: 150,
      });
      var group = new fabric.Group([newImage, t1], {             
       });
      canvas.add(group);

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

function saveVectorCoordinates() {
var myvectorData = '';
  canvas.forEachObject(function (obj) {
     var leftprecent = obj.left;
     var topprecent = obj.top;
     var widthprecent = obj.width;
     var heightprecent = obj.height;
     var id = obj.id;
     var stapmData = obj.id + '&' + leftprecent + '~' + topprecent + '~' + widthprecent + '~' + heightprecent;
     if (myvectorData == '') {
          myvectorData = stapmData;
     } else {
        myvectorData = myvectorData + ':' + stapmData;
     }
     console.log(myvectorData);
  
});
}

<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>
  <button onclick="saveVectorCoordinates()"> Save </button>
</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>