在 JCrop 中设置最大高度和最大宽度

Posted 2023-02-25

【中文标题】在 JCrop 中设置最大高度和最大宽度

【英文标题】：Set max-height and max-width in JCrop

【发布时间】：2015-06-16 17:15:19

【问题描述】：

我想裁剪这个尺寸的图像 (900 * 300) .. 我使用 JCrop 这是我的代码：

<img src="1434467640.png" id="target"  />
<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);
    ;        
);

我想限制大图像的最大宽度和最大高度！有一些参数吗？

【问题讨论】：

你找到解决方案了吗？

【参考方案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，并在内部缩放图像。所选区域将正好是 900x300 像素。祝你好运