search

odyniec / imgareaselect

ImgAreaSelect is a jQuery plugin for selecting a rectangular area of an image. It allows web developers to easily implement image cropping functionality, as well as other user interface features, such as photo notes (like those on Flickr).
http://odyniec.net/projects/imgareaselect/
686 stars 197 forks source link

resizing box doesn't appear initially when height is set to height of image #71

Open mikeydelamonde opened 10 years ago

mikeydelamonde commented 10 years ago

Hi there,

I use this component to crop images and set the initial params to be a 1:1 square maximised in the image. e.g. if my image is 200x300 I will start with a 200x200 square. If you do this it doesn't work. If you set it to 199 px then it does. Hope you can help!

This is with the 1.0.0 rc version

willherzog commented 6 years ago

I just experienced the same issue using version 0.9.10. I believe this happens if the image is resized only via width (and, if my theory is correct, it could also happen with a maximum-width selection if the image was resized via height) because this means that the height is likely fractional (i.e. not an integer value).

I can't say I fully understand the inner workings of this plugin, but one way to solve the issue is by changing how imgWidth and imgHeight are set in the adjust() method. Change these lines:

imgWidth = $img.innerWidth(); imgHeight = $img.innerHeight();

To this:

imgWidth = Math.ceil($img.innerWidth()); imgHeight = Math.ceil($img.innerHeight());

...and you're set. The reason I used Math.ceil() instead of Math.round() is because I wanted to make sure that they always (slightly) exceed any non-rounded values in play.

@odyniec I really appreciate this plugin: it fits my use-case nicely, but better support for non-integer image dimensions might be in order ;-)