動態設置jcrop（不固定選擇）

我有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

我該怎麼做才能獲得最大寬度選擇。

來源

2012-09-20 Rajat Modi

你不能。

好像你的主圖像文件有更大尺寸的看見320×180。你有320×180的選擇區域，它小於你的實際圖像。

所以在這裏你可以做什麼。

計算面積並在代碼中進行設置。爲此，根據圖像的高度和寬度計算新的高度/寬度;以其他參數爲主。（例如在問題你的形象，主參數是寬度，你可以找到它是以縱橫比和主參數一個新的高度。）
設置區座標。

我認爲這將解決您的問題。

來源

2012-09-20 10:39:06 pinaldesai

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所有的時間

來源

2013-07-11 11:53:22 WilliamStam

動態設置jcrop（不固定選擇）

回答

相關問題