在JCrop上设置最小高度和宽度

时间:2014-04-15 08:25:54

标签: javascript jquery image crop jcrop

我正在开发一组电子邮件模板,可让用户添加文本,图像,更改字体和颜色等。现在,如果用户想要在模板的特定区域添加图像,他们将首先点击该模板他们想要添加图像的区域,然后在我的应用程序中添加库中的图像。现在让我们考虑一下他们在模板上点击的区域的可接受尺寸是500 * 500,从库中选择的图像是1000 * 1000,在这种情况下,应用程序会自动调出一个裁剪工具他们可以调整图像大小。但是,我想将裁剪工具限制为仅可拖动到模板中所需位置的最小高度或宽度,即,在此示例中,它们不能再将裁剪工具拖动到高度或宽度以下的任何位置。 500,虽然他们可以保持一个或两个尺寸高于500,因为裁剪工具自动将其重新调整为500 * 500(例如800 * 500,甚至500 * 1000也是可接受的,因为裁剪工具会自动调整图像大小以适应在模板中)。我查看了documentationthis question,但无法找到合适的答案。这是我的一些代码,用于验证是否需要裁剪图像:

var SelectedAreaHeight; //returns the height of the area they clicked on the template
var SelectedAreaWidth; //returns the width similarly

function ImageClick(data)
{
var ReturnImageHeight; //returns the height of the area they clicked on
var ReturnImageWidth; //returns the width similarly

    $(".ResizeImage").each(function()
    {
        ReturnImageHeight = $(this).data("height");
        ReturnImageWidth = $(this).data("width");
    }
    });

    if (ReturnImageHeight > SelectedAreaHeight || ReturnImageWidth > SelectedAreaWidth)
    {
        //this checks if the selected image's height OR width is greater
        //than the  desired area in the template to bring up the cropping tool.
    }
}

现在有一种方法可以限制裁剪工具,使其不能“裁剪”'低于SelectedAreaHeightSelectedAreaWidth?另外请忽略上面示例代码中的任何问题,因为我还没有粘贴我的所有代码(它做的不仅仅是这个)。

1 个答案:

答案 0 :(得分:7)

Ekhm:D jcrop中有这样一个选项:)

http://deepliquid.com/content/Jcrop_Manual.html#Setting_Options

  

minSize:array [w,h]:最小宽度/高度,使用0表示无界   维度不适用