在画布上自动上传图像，无需提交按钮答案

【问题标题】：Auto upload image on canvas without submit button在画布上自动上传图像，无需提交按钮
【发布时间】：2013-10-21 21:20:12
【问题描述】：

我正在使用fabric.js 我试图在没有提交按钮的情况下在画布上上传图像，图像上传成功但问题是当我上传一张图像时，它在画布上上传了4次让我知道如何打破循环一次 count==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 次附加的一张图片。

【问题讨论】：

我认为您将其绑定到多个事件，因此每个事件都会调用该函数并为图片做广告
如何绑定单个事件？？ @lombausch
... bind('DOMNodeInserted DOMSubtreeModified DOMNodeRemoved',... 你在那里绑定了 3 个事件。我不知道你如何调用它们，但我怀疑你的问题在某个地方。
如果你想在插入图像一次后停止，你应该确保你没有在每次调用事件处理程序时初始化count。 count 应该在事件处理程序之外定义和初始化

标签： javascript php jquery canvas fabricjs

【解决方案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;     

           }


            }       
    })

【讨论】：