2012-09-20 49 views
1

我有jcrop现在的工作我想要做的事喜欢这里动态设置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'); 
      }); 
     }); 

,并让这对选择还挺输出enter image description here

,我要的选择这种选择 enter image description here

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

回答

0

你不能。

好像你的主图像文件有更大尺寸的看见320×180。你有320×180的选择区域,它小于你的实际图像。

所以在这里你可以做什么。

  1. 计算面积并在代码中进行设置。为此,根据图像的高度和宽度计算新的高度/宽度;以其他参数为主。 (例如在问题你的形象,主参数是宽度,你可以找到它是以纵横比和主参数一个新的高度。)
  2. 设置区坐标。

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

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

暗淡应保持图像大小的数组

所以像[380180]

我使用下面的基于纵横比居中裁剪区域

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所有的时间