动态设置jcrop的选择（不是固定选择）

Question

我正在使用jcrop现在我想做类似的事情

       jQuery(function(){
            jQuery(".image_container .a-center h2").html("Upload another picture")
            var api;
            jQuery('#cropbox').Jcrop({
            bgOpacity: 0.5,
            bgColor: 'black',
            addClass: 'jcrop-dark',
            aspectRatio: 320/180,
            setSelect:[320,320,180,180],
            onSelect: updateCoords,
            onChange: updateCoords
          },function(){
            api = this;
            api.setOptions({ bgFade: true });
            api.ui.selection.addClass('jcrop-selection');
          });
        });

并在选择

上提供此类输出

我想要这种选择

我该怎么做以获得宽度的最大选择。

Answer 1

var ratio = 1.2222222;
var jcrop_api = $.Jcrop('#modal-file-crop-image');
jcrop_api.setOptions({ aspectRatio: ratio });
var dim = jcrop_api.getBounds();

dim应该包含图像大小的数组

所以像[380,180]

我使用以下内容根据宽高比

使裁剪区域居中

var $img = $("#modal-file-crop-image");
var w = $img.width();
var h = $img.height();

$img.css({"width": w, "height": h})

var ratio = 1.2222222;
var jcrop_api = $.Jcrop('#modal-file-crop-image');
jcrop_api.setOptions({ aspectRatio: ratio });
var dim = jcrop_api.getBounds();
var x = 0, y = 0, x_ = dim[0], y_ = dim[1];

var x_r = (x_ / ratio) - y_;
var y_r = (y_ / ratio) - x_;

if (x_r > 0) {
    x = x_r / 2;
}
if (y_r > 0) {
    y = y_r / 2;
}

jcrop_api.setSelect([x, y, dim[0], dim[1]]);

在你的情况下你可能只是将y设置为0

Answer 2

你不能。

看起来您的主要图像文件的尺寸更大，为320x180。您选择的区域为320 x 180，小于您的实际图像。

所以你可以做的就是。

1. 计算区域并在代码中进行设置。为此，根据图像的高度和宽度计算新的高度/宽度;以其他参数为主。 （例如，对于您的图像，主参数为宽度，您可以找到基于宽高比和主参数的新高度。）
2. 设置区域坐标。

我认为这将解决您的问题。