更改图像时 JCROP 重置纵横比

Posted 2023-02-25

【中文标题】更改图像时 JCROP 重置纵横比

【英文标题】：JCROP Reset Aspect Ratio when changing images

【发布时间】：2012-09-10 08:26:32

【问题描述】：

我正在使用 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>

【参考方案1】：

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

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

【参考方案2】：

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

简单修复

实际图像在标签中使用高度和宽度样式。删除它。

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