自动在画布上上传图像而无需提交按钮

Question

我正在使用fabric.js，我试图在画布上上传图像而没有提交按钮，图像成功上传，但是问题是当我上传一张图像时，它在画布上上传了4次，只是让我知道一旦计数，我该如何打破循环== 1

$(document).ready(function(e) { 
 $('#preview').bind('DOMNodeInserted DOMSubtreeModified DOMNodeRemoved', function(event) {
      // alert('NotChanged');
      var count=0;
      var gal_id =$(this).children('img').attr('id');

        if(gal_id=='upload')

            {
                count++;

       // alert(count);
       // alert(gal_src);
           }
            if(count==1)
          {
                   //var gal_id =$(this).children('img').attr('id');
 var imgInstance2 = new fabric.Image(gal_id, {
  left: 300,
  top: 200,
 // height:100,
  angle: 60
 // opacity: 0.85
});
 // add image onto canvas
  canvas.add(imgInstance2);

   parent.$("#upload_image_pop_up").bPopup().close();


           }



    })
}

您可以在此处看到一张附有4张图像的图片。

Answer 1

得到的答案是我的代码。

$(document).ready(function(e) { 
    var flag=0;
    $('#preview').bind('DOMNodeInserted', function(event) {
        //$('#preview').bind('DOMNodeInserted DOMSubtreeModified DOMNodeRemoved', function(event) {
        if(flag==0)
            {
  // $('#preview').bind('DOMNodeInserted DOMSubtreeModified DOMNodeRemoved', function(event) {
      // alert('NotChanged');
      var count=0;

      var gal_id =$(this).children('img').attr('id');
       var gal_src =$(this).children('img').attr('src');
        if(gal_id=='upload')

            {
                count++;


       // alert(count);
       // alert(gal_src);
           }
            if(count==1)
          {
                   //var gal_id =$(this).children('img').attr('id');
 var imgInstance2 = new fabric.Image(gal_id, {
  left: 300,
  top: 200,
 // height:100,
  angle: 60
 // opacity: 0.85
});
 // add image onto canvas
  canvas.add(imgInstance2);

   parent.$("#upload_image_pop_up").bPopup().close();
       flag=1;     

           }


            }       
    })