2013-10-14 54 views
0

我正在使用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次。 enter image description here

+0

我想你是绑定到多个事件,所以每个事件调用函数和广告图片 – webduvet

+0

我如何绑定单个事件? @lombausch –

+0

... bind('DOMNodeInserted DOMSubtreeModified DOMNodeRemoved',...你正在绑定3个事件,我不知道你是如何调用它们的,但是我怀疑你的问题在哪里 – webduvet

回答

0

得到了答案以下是我的代码。

$(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;  

      } 


      }  
    })