Crop image with JS


You can use JCrop or some other library to crop image, but I set a default size? Who can just move the square over the image? I tried to use JCrop but the user is the one who defines the size that wants to crop the image.

asked by anonymous 14.06.2014 / 17:37

2 answers


When reading the documentation I found the function setSelect , which proved the solution to this problem. Here is the code:

$(function() {
    minSize: [200, 200],
    allowSelect: false,
    allowResize: false
  }, function() {
    this.setSelect([0, 0, 200, 200]);

To change the default size of the box, change the size set to minSize: [200, 200] . Demonstration at JSBin .

14.06.2014 / 18:33

It's one thing that's very poorly documented - I've looked for official documentation on the Jcrop website but found absolutely nothing.

However, it is possible. Let's suppose that the object you are using has id foo , then do the following:

var api = $("#foo").Jcrop({allowResize: false});

Or, more elegantly:

var options = {
    allowResize: false
var api = $("#foo").Jcrop(options);

Note that you still have to indicate the size of the selection area on your own.

There are more options besides allowResize , but unfortunately it's easier to find them by dipping into the Jcrop code than waiting for the programmers to be motivated to document their own work.

14.06.2014 / 18:11