Crop image with JS

Asked

Viewed 1,035 times

5

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

javascript jquery

2 answers

5


While reading the documentation I found the function setSelect, that the solution to this problem has been demonstrated. Follow the code:

$(function() {
  $('#jcrop_target').Jcrop({
    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 in minSize: [200, 200]. Demonstration in Jsbin.

  • +1, but where you found this in the documentation?

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

  • I saw the function setSelect on this page. But nowhere on the site is there any occurrence of the properties allowSelect and allowResize, which I think are an important part of the solution.

  • @Renan At first I was using the properties maxSize and minSize To avoid the resize wandering through the demonstrations, I found this: http://deepliquid.com/projects/Jcrop/demos.php?demo=advanced where are cited all these properties.

  • I know that page. I reiterate what I said in my reply: it is not in the official documentation, you have to see the source code to see that these properties exist.

4

It is something that is very badly documented - I looked for official documentation on the Jcrop website but I found absolutely nothing.

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

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

Or in a more elegant way:

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 other options besides allowResize, but unfortunately it is easier to discover them by diving into Jcrop’s code than hoping that Tapmodo’s programmers will be motivated to document their work right.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.