Javascript JCROP在更改图像时重置纵横比

我使用Jcrop允许用户在将图像加载到下一个表单之前对其进行裁剪。我从DB中加载了一堆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>

jQuery（函数（$）{
//创建变量（在此范围内）以保存API和图像大小
var jcrop_api，boundx，boundy；
$（'#fbimage'）.Jcrop({
onChange:updatePreview，
onSelect:updatePreview，
方面：1
}，函数（）{
//使用API获得真实的图像大小
var bounds=this.getBounds（）；
boundx=边界[0]；
boundy=边界[1]；
//将API存储在jcrop_API变量中
jcrop_api=这个；
});
$（“#下一张照片”）。单击（函数（e）{
如果（$（'.prevPhoto:hidden'））
{
$（'#prevPhoto'）.show（）；
}
count=parseFloat（$（'#profilePicCOUNT'）.val（）；
计数=计数+1；
$（'#profilePicCOUNT'）.val（count）；
//$（'.fbimage'）.attr（“src”，images[count-1]）；
$（'.previewpic'）.attr（“src”，图像[count-1]）；
jcrop_api.setImage（图像[count-1]）；
jcrop_api.setOptions（{bgpopacity:.6}）；
$（'#profilePicURL'）.val（图像[count-1]）；
if（count==images.length）
{
$（'#nextPhoto'）.hide（）；
}
返回false；
});
$（'#prevPhoto'）。单击（函数（e）{
if（$（'#profilePicCOUNT'）.val（）==2）
{
$（'#prevPhoto'）.hide（）；
}
如果（计数0）
{
var rx=100/c.w；
var ry=100/c.h；
$（'#previewpic'）.css({
宽度：数学圆（rx*boundx）+“px”，
高度：数学圆（ry*boundy）+“px”，
marginLeft:“-”+数学四舍五入（rx*c.x）+“px”，
marginTop:“-”+数学圆（ry*c.y）+“px”
});
}
};
});

经过几个小时的搜索和尝试，答案很简单。这行代码重置了预览比率，使其正常工作：

var newUrl = 'https://..../image.jpg'
var jcrop_api = $('#Image1').data("Jcrop");
jcrop_api.setImage(newUrl , function() {
    jcrop_api = this;
    var bounds = this.getBounds();
});

---

我在更改图像时遇到了类似的纵横比问题

简单修复

实际图像在标记中使用高度和宽度样式。只需删除该样式

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