动态设置 jcrop 的选择（非固定选择）答案

【问题标题】：Dynamically set selection of jcrop (not fixed selection)动态设置 jcrop 的选择（非固定选择）
【发布时间】：2012-09-12 16:23:45
【问题描述】：

我正在使用 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');
          });
        });

它会在选择时给出这种输出

我想要这种选择

我应该怎么做才能获得最大宽度选择。

【问题讨论】：

标签： php jquery crop jcrop

【解决方案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

【讨论】：

【解决方案2】：

你不能。

您的主图像文件的尺寸似乎更大，为 320x180。您选择的区域为 320 x 180，比您的实际图像小。

所以在这里你可以做的是。

计算面积并在您的代码中进行设置。为此，根据图像的高度和宽度计算新高度/宽度；以其他参数为主。（例如，对于您有问题的图像，主参数是 Width，您可以找到基于纵横比和主参数的新高度。）
设置区域坐标。

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

【讨论】：