設置最大高度和最大寬度在JCrop

Question

我想在這個尺寸（900 * 300），裁剪圖像..我用JCrop這是我的代碼：

<img src="1434467640.png" id="target" alt="" /> 
<input type="text" id="x" name="x"> 
<input type="text" id="y" name="y"> 
<input type="text" id="w" name="w"> 
<input type="text" id="h" name="h"> 

JS：

 $(window).load(function() { 
    var jcrop_api; 
    var i, ac; 

    initJcrop(); 

    function initJcrop() { 
      jcrop_api = $.Jcrop('#target', { 
      onSelect: storeCoords, 
      onChange: storeCoords 
      }); 
      jcrop_api.setOptions({ aspectRatio: 3 }); 
      jcrop_api.setOptions({ 
allowResize: false , 
      minSize: [900, 300], 
      maxSize: [900, 300] 
     }); 
     jcrop_api.setSelect([0, 0, 900, 300]); 
    }; 



    function storeCoords(c) { 
    jQuery('#x').val(c.x); 
    jQuery('#y').val(c.y); 
    jQuery('#w').val(c.w); 
    jQuery('#h').val(c.h); 
    };   
}); 

我想限制大圖像的最大寬度和最大高度！有一些參數嗎？

Answer 1

您可以通過設置設定爲包含圖像框的最大比例：

boxWidth: 450, //Maximum width you want for your bigger images 
boxHeight: 400, //Maximum Height for your bigger images 

如果您想將其設置爲你做

minSize: [ 900, 300], 
maxSize: [ 900, 300] 

初始化整個代碼將是：

$('#cropbox').Jcrop({ 
    aspectRatio: (900/300), // This should be Width/Height 
    boxWidth: 800, //Maximum width you want for your bigger images 
    boxHeight: 600, //Maximum Height for your bigger images 
    onSelect: updateCoords, 
    minSize: [ 900, 300 ], 
    maxSize: [ 900, 300 ] 
}); 

這將設置框爲800x600和圖像縮放insi德。所選區域將精確爲900x300像素。祝你好運