Resize an image after cropping

Question

Folks,I am working on an image component for my application and it involves image cropping and resizing.
The issue we are facing is we are able to crop the image keeping the aspect ratio constant initially,but in our case the user can again resize the cropped image and here comes the problem.If we try to resize the cropped image we also get the portion of the image which is not present in the cropping area.
For reference I add this link.We want to have a somewhat similar functionality.But the problem is we are not able to get the logic right.Once we crop a portion we get the height,width of that image.We have the original aspect ratio,but how can we now calculate the images new height,width when theuser resizes the cropped portion?
The actual image is present and we do not crop it actually,but virtually for showing it to the user.We are using javascript/jquery for achieving this.No specific library but just the logic of aspect ratio till now
This is the actual picture.

enter image description here

This is the cropping area selected.And this would be the cropped area.

enter image description here

This is the resized image after cropping.The image resizes only for the cropped portion and not the entire one,whereas its actually present there.

enter image description here

I am not able to understand your question. Are you saying that the user can, for example, choose a square portion from a rectangular image then resize it further maintaining square ratio? — Salman A

Four_lo Four_lo · Accepted Answer · 2013-03-13T12:39:14

Just from playing with your application the error that is generated would be similar to an error that would be created if you asked for a CSS property with Jquery after selecting multiple elements. A function can only return a singl result, so you still only obtain the property for the first matched element. Although I can not be sure because your code is 8000 lines long with no comments

Resize an image after cropping

1 Answers