使用JCrop裁剪多張圖片

我使用JCrop裁剪圖像。 JCrop是一款圖像裁剪插件。一個頁面包含3個要裁剪的圖像。使用JCrop裁剪多張圖片

這是我initiliaze陣列用於jcrop：

var jcrop = [];

然後我有：

$('img.picture').each(function(){ 
    imgcrop = $(this); 
    imgcrop.Jcrop({ 
     bgColor: 'white', 
     aspectRatio: 1 
    }, function(){ 
     jcrop.push(this); 
     }); 
});

的問題是，當我有jcrop[1].setImage('/image/no-picture.jpg');它有時改變所述第一或第三圖像。

$('div.deletePhoto a').bind('click', function(e){ 
    e.preventDefault(); 
    var index =$('div.deletePhoto').index($(this).parent()); 

    $.post('/deletePicture', function(data){ 
     alert(index); 
     jcrop[index].setImage('/image/no-picture.jpg'); 
     jcrop[index].disable(); 
    }); 
});

可變index是好的，但jcrop[index]不是。

HTML：

<!-- pictures --> 
    <div class="blu_3"> 
     <div class="imgWrapper"> 
      <img class="blu_10 picture" /> 
      <div class="delete deletePhoto"><a href="#" title="delete">[ x ]</a></div> 
     </div> 
     <input class="crop" type="button" value="crop" /> 
    </div> 
    <div class="blu_3"> 
     <div class="imgWrapper"> 
      <img class="blu_10 picture" /> 
      <div class="delete deletePhoto"><a href="#" title="delete">[ x ]</a></div> 
     </div> 
     <input class="crop" type="button" value="crop" /> 
    </div> 
    <div class="blu_3"> 
     <div class="imgWrapper"> 
      <img class="blu_10 picture" /> 
      <div class="delete deletePhoto"><a href="#" title="delete">[ x ]</a></div> 
     </div> 
     <input class="crop" type="button" value="crop" /> 
    </div>

我怎樣才能解決呢？

來源

2012-10-22 JR Galia

你正在做一個循環?,也許如果你做它出了一個循環，它會工作?,以防萬一如果你需要只改變jcrop [1]圖像 –

是的，在一個循環中。 –

你可以顯示你使用jcrop [1] .setImage的代碼嗎？ –

$('img.picture').each(function(){ 
    imgcrop = $(this); 
    imgcrop.Jcrop({ 
     bgColor: 'white', 
     aspectRatio: 1 
    }, function(){ 

     jcrop.push($(this)); //the $(this) is important 

     }); 
});

和

$('div.deletePhoto a').bind('click', function(e){ 
    e.preventDefault(); 

    var index = $('div.deletePhoto').index($(this).parent()); //return it to this 

    $.post('/deletePicture', function(data){ 
     alert(jcrop[index].attr('id')); 
     jcrop[index].setImage('/image/no-picture.jpg'); 
     jcrop[index].disable(); 
    }); 
});

HTML：

<!-- pictures --> 
    <div class="blu_3"> 
     <div class="imgWrapper"> 
      <img class="blu_10 picture" id="img_1" /> 
      <div class="delete deletePhoto"><a href="#" title="delete">[ x ]</a></div> 
     </div> 
     <input class="crop" type="button" value="crop" /> 
    </div> 
    <div class="blu_3"> 
     <div class="imgWrapper"> 
      <img class="blu_10 picture" id="img_2" /> 
      <div class="delete deletePhoto"><a href="#" title="delete">[ x ]</a></div> 
     </div> 
     <input class="crop" type="button" value="crop" /> 
    </div> 
    <div class="blu_3"> 
     <div class="imgWrapper"> 
      <img class="blu_10 picture" id="img_3" /> 
      <div class="delete deletePhoto"><a href="#" title="delete">[ x ]</a></div> 
     </div> 
     <input class="crop" type="button" value="crop" /> 
    </div>

，所以我已經設置爲每img標籤一個id = 「img_1」 ID = 「IMG_2」，IMG = 「img_3」，與上面的代碼ii檢查它，它的工作正確，選擇的每個圖像是正確的ID ..

來源

2012-10-22 06:39:45

我已經改變了它。這是相同的。我得到了正確的索引值。 –

更新...希望它會幫助 –

這個問題是不是在索引，因爲我提醒它.. –

使用JCrop裁剪多張圖片

回答

相關問題