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

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;     

           }


            }       
    })