javascript - 如何使用 jCrop 调整图像大小以适合所有纵横比？

Question

我正在使用 Jcrop 调整纵横比为 1 的图像大小。在大多数情况下效果很好，但是在某些情况下，当图像更宽时，我无法选择所有图像。我可以做什么样的动作来选择图像的全部内容？

我的代码是：

function readURL(input) {
if (input.files && input.files[0]) {
  var reader = new FileReader();
  reader.onload = function(e) {
    $('#jimage').attr('src', e.target.result);
  }

  reader.readAsDataURL(input.files[0]);
     $('#jimage').Jcrop({
        onSelect:    showCoords,
        aspectRatio: 1,
        bgColor:     '#2e7cce',
        bgOpacity:   .4,
        boxWidth: 500,
    });
}}

我尝试添加一些我在网上查看的缩放实现，但是缩放会影响选择区域并且结果是相同的。我需要能够选择图像的所有内容。

标签： javascriptjqueryjcrop

Answer 1

设置aspectRatio: 1意味着您总是想要一个正方形选择，如果图像是矩形的（高度大于宽度，反之亦然），您将无法选择整个图像。

一种解决方案是删除aspectRatio: 1这将允许自由形式裁剪。

另一种解决方案是在将图像传递给 Jcrop 之前将其缩放为正方形。

reader.onload = function(e) {
  $('#jimage').attr('src', e.target.result);
  width = $('#jimage').width();
  height = $('#jimage').height();
  if(height > width )
    $('#jimage').width(width * (height/width));
  else if(width > height)
    $('#jimage').height(height * (width/height));
}