Resize image have user set width or height javascript calculate and fill width or height

Question

I have scoured the web and found partial solutions only that mostly are incomplete.

I want a user to be able to rescale an image to a selected size. This would use a form with 2 text boxes one for width and one for height.

Lets say the image is 1000Wx2000H and user wants to rescale to 100Wx200H, that is easy but if he wants to scale to 125W x A, where A is an unknown value for Height. So user would enter 125 in width text box and javascript would calculate the H text box , or visa versa , user fills in height and width is calculated.

Super nice to have an ignore aspect ration check box too that would select itself it width and height are entered!

I can easily enough get the image dimenseions in PHP and in fact I need to post the result back to the page to get it in php to send to imagemagick.

I think I am not the first to want something like this but not finding anything useful enough on searches.

I do not claim to be a JS expert, but at times it is necessary. PHP on the other hand seemed to come more naturally.

Answer 1

In order to make it work with, we have to first calculate the aspect ratio of the actual image and then calculate the width or height based on given value. We can make use of naturalHeight and naturalHeight properties of Image element to calculate aspect ratio.

let naturalHeight = $img.naturalHeight;
let naturalWidth = $img.naturalWidth;
let aspectRatio = naturalHeight/naturalWidth;

let height = width*aspectRatio;
$heightInput.value = height;

The above solution will calculate the height based on given width value. Here is the full solution -

<input type="number" id="h" placeholder="Enter height..." onblur="calculateWidth(this.value)">

<input type="number" id="w" placeholder="Enter width..." onblur="calculateHeight(this.value)">


<button onclick="apply()">
  Apply
</button>

<p>
<img id="img" src="https://images.pexels.com/photos/707194/pexels-photo-707194.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
</p>

let $img = document.getElementById('img');
let $heightInput = document.getElementById('h');
let $widthInput = document.getElementById('w');

function calculateHeight(width){
  let naturalHeight = $img.naturalHeight;
  let naturalWidth = $img.naturalWidth;
  let aspectRatio = naturalHeight/naturalWidth;

  let height = width*aspectRatio;
  $heightInput.value = height;
}

function calculateWidth(height){
  let naturalHeight = $img.naturalHeight;
  let naturalWidth = $img.naturalWidth;
  let aspectRatio = naturalWidth/naturalHeight;

  let width = height*aspectRatio;
  $widthInput.value = width;
}

function apply(){

  let height = $heightInput.value;
  let width = $widthInput.value;

  if(height > 0){
    $img.style.height = `${height}px`;
  } else {
    $img.style.height = `auto`;
  }

  if(width > 0){
    $img.style.width = `${width}px`;
  } else {
    $img.style.width = `auto`;
  }
}

Live in action - https://jsitor.com/tFBo8_F1V

Answer 2

Working From Ashvin777's post

Changed to

$("#crop_x").val(Math.round(cropbox.x));
$("#crop_y").val(Math.round(cropbox.y));
$("#width").val(Math.round(cropbox.w));
$("#height").val(Math.round(cropbox.h));

I also discovered that I needed no javascript POST or anything special. A normal HTML POST passed the variables from jcrop along perfectly

I also added the height and width sizes (I set these as PHP variables then if I want I can calculate them for each image and set them from php)

$(function() {
    $('#cropbox').Jcrop({ boxWidth: <?php echo $boxwidth;?>, boxHeight: <?php echo $boxheight;?> });
});

The user already could override the calculated aspect. If user sets width and height is calculated then height can be overridden, so I chose to always use the "!" ignore aspect option in imagemagick because javascript is already calculating correct aspect and this way it can be overridden, and the values user sees are exactly what will come out in final image.

The only problem I see is that if I load an image in jcrop on first load it is fine. On immediate subsequent loads however I sometimes see two images first the original size , then the set size. If I load another image between loading it the second time, or third time, problem goes away. Sounds like something is not clearring or flushing out . this happens in Chrome and Firefox. I however see that others have the same issue.