JCROP更改圖像時重置高寬比

Question

我正在使用Jcrop允許我的用戶在將圖像加載到下一個表單之前裁剪圖像。我從數據庫的JS數組中加載一堆圖像，以便他們可以快速滾動圖像。

當我把一個新的圖像加載到JCrop中時，它會將高寬比調高。以下是我的js

<script type="text/javascript"> 

    jQuery(function($){ 

     // Create variables (in this scope) to hold the API and image size 
     var jcrop_api, boundx, boundy; 

     $('#fbimage').Jcrop({ 
     onChange: updatePreview, 
     onSelect: updatePreview, 
     aspectRatio: 1 
     },function(){ 
     // Use the API to get the real image size 
     var bounds = this.getBounds(); 
     boundx = bounds[0]; 
     boundy = bounds[1]; 
     //Store the API in the jcrop_api variable 
     jcrop_api = this; 
     }); 

     $('#nextPhoto').click(function(e) { 
      if ($('.prevPhoto:hidden')) 
      { 
       $('#prevPhoto').show(); 
      } 
      count= parseFloat($('#profilePicCOUNT').val()); 
      count = count+1; 
      $('#profilePicCOUNT').val(count); 
      //$('.fbimage').attr("src",images[count-1]); 
      $('.previewpic').attr("src",images[count-1]); 
      jcrop_api.setImage(images[count-1]); 
      jcrop_api.setOptions({ bgOpacity: .6 }); 


      $('#profilePicURL').val(images[count-1]); 
      if (count==images.length) 
      { 
       $('#nextPhoto').hide(); 
      } 
       return false; 
     }); 

     $('#prevPhoto').click(function(e) { 
      if ($('#profilePicCOUNT').val()==2) 
      { 
       $('#prevPhoto').hide(); 
      } 
      if (count<(images.length+1)) 
      { 
       $('#nextPhoto').show(); 
      } 
      count= parseFloat($('#profilePicCOUNT').val()); 
      count = count-1; 
      $('#profilePicCOUNT').val(count); 
      //$('.fbimage').attr("src",images[count-1]); 
      $('.previewpic').attr("src",images[count-1]); 
      jcrop_api.setImage(images[count-1]); 
      jcrop_api.setOptions({ bgOpacity: .6 }); 
      $('#profilePicURL').val(images[count-1]); 
      count= parseFloat($('#profilePicCOUNT').val()); 
      count = count-1; 
      return false; 
     }); 

     function updatePreview(c) 
     { 
     if (parseInt(c.w) > 0) 
     { 
      var rx = 100/c.w; 
      var ry = 100/c.h; 

      $('#previewpic').css({ 
      width: Math.round(rx * boundx) + 'px', 
      height: Math.round(ry * boundy) + 'px', 
      marginLeft: '-' + Math.round(rx * c.x) + 'px', 
      marginTop: '-' + Math.round(ry * c.y) + 'px' 
      }); 
     } 
     }; 

    }); 

</script> 

Answer 1

經過幾個小時的搜索和嘗試答案很簡單。這行代碼復位預覽比很好地工作：

jcrop_api.setImage(images[count-1], function() { 
    jcrop_api = this; 
    var bounds = this.getBounds(); 

Answer 2

我改變圖像

簡單的修復時也有類似的高寬比的問題

實際圖像使用的高度和寬度的風格在標籤。只要刪除它。

$('#Image1').data("Jcrop").destroy(); 
$("#Image1").removeAttr("style");