work out correct new proportions for an image 1

[youradds]

This may sound a little weird, but I'm working on a Perl script that uses Image::Magick to resize an image from its current dimensions, to its new ones.

However, we need to accommodate for silly people, who may put in dimensions that won't fit their image. i.e I want to stop the dimensions making a "squished" or "stretched" image.

Now, FrontPage has a cool function for this - where you just tick the "keep aspect ratio" tickbox in the image properties, and then when you enter your new dimensions - it automatically gives you the correctly proportionate dimensions. For example, an image with


Start image dimensions: width=200 height=218

Desired output: width=150 height=163

Now, the problem doesn't come here - it is when I try and work out the "height" or "width", based on only one parameter being passed in. For example:

Desired output: width=150 height= ???

i.e it needs to work out "height" to the correct pixels (in this case, it should work it out to 163px)

Does anyone know of a function that will do this, or would anyone be able to give me a hand in working out the formula to do this? =)

TIA!

Andy

 

[youradds]

BTW, its not much - but here is a little starting point I have:

<script>

  function get_new_dimensions() {
     
      var current_width  = 200
      var current_height = 218

      var new_width      = 150;
     
      var new_height = some stuff here to work out the value of new_height
     
  }

</script>

This is the bit I'm stuck on =)

      var new_height = some stuff here to work out the value of new_height

BTW - I know I've hardcoded in the numbers for the current image dimensions, but I have a solution for that (the dimensions are going to be passed in via a Perl script, with the dimensions grabbed in real time from Image::Size)

TIA!

Andy

 

[nickdel]

Can't you just work out the percentage of the height and then apply the same rule?

i.e.

width=150 height=163 (so the width is 92% of the height)

NewWidth = 200 (New Height: 200 / .92 = 217)

 

[feherke]

It is just rule of three.

<script>
  function get_new_dimensions() {
      var current_width  = 200
      var current_height = 218
      var new_width      = 150;
      var new_height = [red]new_width*current_height/current_width[/red]
  }
</script>

Feherke.

http://rootshell.be/~feherke/

 

[youradds]

Hi,

Thanks for your reply - I can't believe it that easy <G> [thanks coming your way =)]

Cheers

Andy

 

[youradds]

Hi,

I've come up with this code:

<script>
  function get_new_dimensions() {

      var current_width  = document.demo.width
      var current_height = document.demo.height

      var new_width      = document.myform.new_width.value
      var new_height     = document.myform.new_height.value

      document.myform.current_width.value = current_width
      document.myform.current_height.value = current_height

     if (new_height > 0 && new_width == "") {

        new_width = new_height  * current_height / current_width 

        document.myform.width.value = new_width
        document.myform.height.value = new_height
        
        document.demo.width = new_width
        document.demo.height = new_height        
     } 
     
     if (new_width > 0 && new_height == "" ) {
        new_height = new_width * current_height / current_width
        document.myform.height.value = new_height
        document.myform.width.value = new_width
        document.demo.width = new_width
        document.demo.height = new_height        

     }  
  }

</script>
<form name="myform">
    <p>	current_width = <input type="text" name="current_width" size="10" /> <br />
	current_height = <input type="text" name="current_height" size="10" /></p>
	New Width: <input type="text" name="new_width" size="10" /> [ enter number 
	here ]<br>
	<font color="#0000FF"><b>...or....</b></font><br>
	New Height: <input type="text" name="new_height" size="10" />
	<p>
	<input type="button" onclick="get_new_dimensions()" value="Get proportional dimenison">
	<br>
	<br />
    New Width: <input type="text" name="width" id="width" />&nbsp; (auto 
	updated)<br />
	New Height: <input type="text" name="height" id="height" /> (auto updated) <br />
	</p>
</form>
<p><img border="0" src="yp_03.jpg" name="demo" width="163" height="177"> <br>
<br>
100 
height should be 92 width</p>
<p>&nbsp;</p>

However, although the working out of the "height" is going ok - trying to work out the "width" (based on a figure given for the "height") doesn't seem to give the right figure :/

For example, the image is w:163 h:177 (standard).

Now, if I enter a "new height" of say 100, and then click the button - the figure that comes out is 108 (it should be more like 92px)

Can you see my silly boo-boo, or is it something more sinister?

TIA!

Andy

 

[nickdel]

new_width = new_height  * current_height / current_width

should be

new_width = new_height  * current_width / current_height

Nick

 

[youradds]

OMG - you legend (knew it was gonna be a silly mistake =))

I've now added a Math.round() bit around the figures, so they get rounded up/down (instead of having decimals).

For anyone interested, here's the final code:

<script>
  function get_new_dimensions() {

      var current_width  = document.demo.width
      var current_height = document.demo.height

      var new_width      = document.myform.new_width.value
      var new_height     = document.myform.new_height.value

      document.myform.current_width.value = current_width
      document.myform.current_height.value = current_height

     if (new_height > 0 && new_width == "") {

        new_width = Math.round(new_height  * current_width / current_height)

        document.myform.width.value = new_width
        document.myform.height.value = new_height
        
        document.demo.width = new_width
        document.demo.height = new_height        
     } 
     
     if (new_width > 0 && new_height == "" ) {
        new_height = Math.round(new_width * current_height / current_width)
        document.myform.height.value = new_height
        document.myform.width.value = new_width
        document.demo.width = new_width
        document.demo.height = new_height        

     }  
  }

</script>
<form name="myform">
    <p>	current_width = <input type="text" name="current_width" size="10" /> <br />
	current_height = <input type="text" name="current_height" size="10" /></p>
	New Width: <input type="text" name="new_width" size="10" /> [ enter number 
	here ]<br>
	<font color="#0000FF"><b>...or....</b></font><br>
	New Height: <input type="text" name="new_height" size="10" />
	<p>
	<input type="button" onclick="get_new_dimensions()" value="Get proportional dimenison">
	<br>
	<br />
    New Width: <input type="text" name="width" id="width" />&nbsp; (auto 
	updated)<br />
	New Height: <input type="text" name="height" id="height" /> (auto updated) <br />
	</p>
</form>
<p><img border="0" src="yp_03.jpg" name="demo" width="163" height="177"> </p>

Thanks again for your help guys

Cheers

Andy