Image coordinates calculation algorithm

Question

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.

Answer 1

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.

Answer 2

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%