I am working on a set of email templates which lets users add text, images, change font and colours, etc. Now if the user wants to add an image in a specific area of the template, they will first click on that area where they want the image to be added and then add an image from the library in my application. Now let's consider that the acceptable dimensions of the area they clicked on the template is 500 * 500, and the image selected from the library is 1000 * 1000, in such a case the application will automatically bring up a cropping tool using which they can resize the image. However, I want to restrict the cropping tool to only be draggable to the minimum height OR width of the desired location in the template, i.e., in this example, they should not be able to drag the cropping tool any further below the height OR width of 500, although they can keep one or both dimensions above 500 as the cropping tool automatically resizes it back to 500 * 500 (for e.g. 800 * 500, or even 500 * 1000 is acceptable too as the cropping tool automatically resizes the image to fit in the template). I had a look at the documentation and this question but couldn't really find a suitable answer to my question. Here's some of my code which validates if an image needs to be cropped:

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.
    }
}

Now is there a way I could just restrict the cropping tool in a way that it is not 'crop-able' below SelectedAreaHeight OR SelectedAreaWidth ? Also please ignore any problems with the sample code above as I haven't pasted all of my code (it does a lot more than just this).

I am working on a set of email templates which lets users add text, images, change font and colours, etc. Now if the user wants to add an image in a specific area of the template, they will first click on that area where they want the image to be added and then add an image from the library in my application. Now let's consider that the acceptable dimensions of the area they clicked on the template is 500 * 500, and the image selected from the library is 1000 * 1000, in such a case the application will automatically bring up a cropping tool using which they can resize the image. However, I want to restrict the cropping tool to only be draggable to the minimum height OR width of the desired location in the template, i.e., in this example, they should not be able to drag the cropping tool any further below the height OR width of 500, although they can keep one or both dimensions above 500 as the cropping tool automatically resizes it back to 500 * 500 (for e.g. 800 * 500, or even 500 * 1000 is acceptable too as the cropping tool automatically resizes the image to fit in the template). I had a look at the documentation and this question but couldn't really find a suitable answer to my question. Here's some of my code which validates if an image needs to be cropped:

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.
    }
}

Now is there a way I could just restrict the cropping tool in a way that it is not 'crop-able' below SelectedAreaHeight OR SelectedAreaWidth ? Also please ignore any problems with the sample code above as I haven't pasted all of my code (it does a lot more than just this).

• javascript
• jquery
• image
• crop
• jcrop

Share Improve this question Follow edited May 23, 2017 at 11:46 CommunityBot 111 silver badge asked Apr 15, 2014 at 8:25 Computer ScientistComputer Scientist 10533 silver badges1212 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Ekhm :D There is such an option in jcrop :)

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

minSize : array [ w, h ] : Minimum width/height, use 0 for unbounded dimension n/a