# Image coordinates calculation algorithm

I was looking at Jcrop library code for scaled image size calculation, but I couldn't clearly understand algorithm used in following function:

https://github.com/tapmodo/Jcrop/blob/master/js/jquery.Jcrop.js#L187

``````function presize(\$obj, w, h)
{
var nw = \$obj.width(),
nh = \$obj.height();
if ((nw > w) && w > 0) {
nw = w;
nh = (w / \$obj.width()) * \$obj.height();
}
if ((nh > h) && h > 0) {
nh = h;
nw = (h / \$obj.height()) * \$obj.width();
}
xscale = \$obj.width() / nw;
yscale = \$obj.height() / nh;
\$obj.width(nw).height(nh);
}
``````

I know that its using jquery image object and boxWidth and boxHeight as described on following link:
http://deepliquid.com/content/Jcrop_Sizing_Issues.html

But I want to understand the algorithm used.

• What don't you understand? Where are you having difficulties? Which bit of this algorithm are you struggling with? – Oded Apr 22 '14 at 12:52
• If you want to understand any piece of code or algorithm the very first step should be to give your variables decent names. It makes a world of difference. And NO, h and w are not decent names. They are absolutely horrible names. – Dunk Apr 22 '14 at 13:25
• @Dunk If he doesn't understand how the algorithm works, then I suppose he'd be hardly suited to name the variables, wouldn't you think? – Neil Apr 22 '14 at 13:28
• @Neil:If you can't name the variables then you have little chance of understanding the algorithm anyways. The easiest way to learn an algorithm is to write it in readable text form. I suppose there will occasionally be a variable that you can't come up with a good name because you don't really know what it is for but if you name all the other variables it will still help a lot. In this particular case, simply renaming h and w (which don't really seem like height and width) to what they really mean would help. – Dunk Apr 22 '14 at 14:29
• @Neil: at least the OP could try to give the variables better names - that would show a minimal effort trying to understand the "algorithm" by himself – Doc Brown Apr 22 '14 at 20:45

## 2 Answers

Lets break it down into pieces, shall we?

``````function presize(\$obj, w, h)
{
``````

Accept a jQuery object (\$obj) with a resize width and height. How do I know it requires a jQuery object? Functions `width()` and `height()` aren't native for dom elements.

``````  var nw = \$obj.width(),
nh = \$obj.height();
``````

Create two new variables corresponding to object's current width and height.

``````  if ((nw > w) && w > 0) {
nw = w;
nh = (w / \$obj.width()) * \$obj.height();
}
``````

If object's current width is greater than resize width (and assuming resize width has some meaningful value), `nw` is reassigned to resize width `w`, and `nh` is assigned to a height proportionate to width resize (`w / \$obj.width()` would be the proportion of new width with respect to old width. If these were the same, it would be 1 and hence not chance height.

``````  if ((nh > h) && h > 0) {
nh = h;
nw = (h / \$obj.height()) * \$obj.width();
}
``````

Do same for height, assuming new height is greater than resize height `h` and passed height is some meaningful value.

``````  xscale = \$obj.width() / nw;
yscale = \$obj.height() / nh;
``````

Create or assign global variables `xscale` and `yscale` to inverse of newly created proportions. In other words, if you halved width and height, xscale would be 200% and yscale would be 200%. This is likely in order to know how to reverse the operation later, though that's just speculative.

This is a function side effect, and this is generally bad practice since it can be glanced over too easily, however I'd be lying if I claimed I never needed to do something of this nature. Call me lazy.

``````  \$obj.width(nw).height(nh);
``````

Attempt to assign object's new width and height to calculated width and height. If this were an image, this would likely work out well, however, this is by no means guaranteeing that the resulting width and height will be the calculated width and height.

``````}
``````

Hope that helps.

I used some simple values to check how it works. My understanding:

If the required height and width are greater than the object's height and width, it does nothing.

If the required width is less than the object width, assume the new width to the required width. Calculate the new height based on the proportion of required and current object width.

If the calculated height above is greater than the required height, assume the new height to the required height. Calculate the new width based on the proportion of required and current object height.

• Current: 100, 50 Required: 200, 100 => do nothing
• Current: 200, 100 Required: 100, 50 => reduce the width and height by 50%
• Current: 200, 100 Required: 100, 40 => reduce the width and height by 40%
• Current: 200, 100 Required: 100, 60 => reduce the width and height by 50%
• Current: 200, 100 Required: 300, 60 => reduce the width and height by 60%