I’ve decided to create a new segment on my site called “Self Made Tools.” From time to time, I make software tools to help me through tasks that I can’t find tools for quickly. I’ve decided to really jump on the Open Source movement bandwagon and share my tools with source. This week’s tool is “Proportional Image Resizer.” What? Ok, let me explain.
When coding HTML, you know when you have an image that is one size and you need it to fit within an area that is of another. Say the image is 800 px X 600 px and you need to make it fit into an area that is 500 px wide spot. Easy right? Just change the one dimension in your code to reflect the change. Sure your browser will adjust your image. But it may not pass some web standards for all browsers. It’s just not clean. You need to have both a width and height specified when resizing an image using code.
How do you resize these images proportionally? Use a simple equation to do the job. You know the before image is 800 px X 600 px right? You also know you need the image to fit within a 500 px width. Now you just need the other part of the equation (solve for x).
800 / 600 = 500 / X
Cross multiply and you’re done right? How about we just skip doing the equation every time and just use a tool? That’s how the proportional image resizer tool was born. You can also do the reverse as well (height vs width). I know there are other tools out there to perform the task. But why not use something homegrown? You could even code this yourself in a matter of minutes. I’ve posted the source to the script above. Thanks for reading!
<html>
<head>
<title>Proportional Image Resizer</title>
<script language='Javascript'>
//Matt Kendrick
//March 28, 2010
function resize_by_width(width)
{
var x_before = document.getElementById('x_before').value;
var y_before = document.getElementById('y_before').value;
var x_new = width;
var y_new;
//a / b = c / x
//x = (c * b) / a
y_new = (x_new * y_before) / x_before;
document.getElementById('y_new').value = y_new;
}
function resize_by_height(height)
{
var x_before = document.getElementById('x_before').value;
var y_before = document.getElementById('y_before').value;
var x_new;
var y_new = height;
//a / b = x / c
//x = (c * b) / a
x_new = (x_before * y_new) / y_before
document.getElementById('x_new').value = x_new;
}
</script>
<style>
.dim_box {width:50px;}
</style>
<head>
<body>
<h2>Proportional Image Resizer</h2>
<b>Instructions</b><br>
<p>
Enter the starting dimensions of the image. <br>
Then enter the dimensions you would like to conform the image to. <br>
<br>
ex. You have an image that is 800 x 600, and you need it to fit the image <br>
proportionaly in a 525 pixel wide area. Enter 800 for the width and 600 for <br>
the height in the before dimensions. Then enter 525 in the after dimensions <br>
width. The script will then compute the proportional height for you.
</p>
<br>
<b>Before Dimensions</b><br>
Width: <input type='text' id='x_before' class='dim_box' value=0> Height: <input type='text' id='y_before' class='dim_box' value=0><br><br>
<b>After Dimensions</b><br>
Width: <input type='text' id='x_new' class='dim_box' onKeyUp='resize_by_width(this.value);' value=0> Height: <input type='text' id='y_new' class='dim_box' onChange='resize_by_height(this.value);' value=0><br><br>
</body>
</html>
Subscribe
