1

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

它在选择时给出了这种输出在此处输入图像描述

我想要这种选择 在此处输入图像描述

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

4

2 回答 2

2 
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

于 2013-07-11T11:53:22.347 回答
0

你不能。

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

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

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

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

于 2012-09-20T10:39:06.323 回答