Web Programming: Proportional Image Resize in JavaScript

Kemarin dapat tantangan gimana caranya resize image dengan menggunakan javascript. Eh, Alhamdulillah dapet 2 artikel dan dikombine jadi oke punya deh,..

Berikut detilnya:

Proportional Image Resize in JavaScript

Socialbrowse currently shows summaries of shared links that have an ATOM or RSS feed.  The feeds come with images of all sizes and we have to change the height and width to fit within the alloted space.  CSS has max-width and max-height parameters but they have issues in IE and they don’t keep original proportions of the image!  To resize and keep the proportions we use javascript.

This javascript resize function will do a proportional resize to keep the given <img> within the given max height and max width (maxh and maxw).  Feel free to copy and use it in any way you like.

var resize = function(img, maxh, maxw) {
var ratio = maxh/maxw;
if (img.height/img.width > ratio){
// height is the problem
if (img.height > maxh){
img.width = Math.round(img.width*(maxh/img.height));
img.height = maxh;
}
} else {
// width is the problem
if (img.width > maxh){
img.height = Math.round(img.height*(maxw/img.width));
img.width = maxw;
}
}
};

Source: http://thingsilearned.com/2008/12/27/proportional-image-resize-in-javascript/

Like t-shirts? Find hundreds of cool Geek T-shirts at Teenormous

If you need to force images to fit within your web page layout you really only have two options:

  • Resize images on the server.
  • Resize images on the client.

Resize images on the server

If you have the resources, resizing on the server is probably the best solution depending on your requirements. This solution requires server-side software to manipulate the images and store the altered image for future reference. For Ruby, the RMagick library does an excellent job with this. However, manipulating images on the server is a very expensive operation. If you are on a shared server, like I am, this may not be an option for you. But don’t worry, there is an alternative below.

Resize images on the client

The other option for resizing images involves using Javascript on the client-side to resize them on the fly. This solution has two drawbacks:

  • It requires Javascript.
  • It requires downloading the full image, whereas the server-side resizing will result in much smaller image sizes.

If these two drawbacks are ok with you, then read on🙂

To resize the images, you need to first create a javascript function to do the resizing. Feel free to use this one that I wrote:

function resize(which, max) {
  var elem = document.getElementById(which);
  if (elem == undefined || elem == null) return false;
  if (max == undefined) max = 100;
  if (elem.width > elem.height) {
    if (elem.width > max) elem.width = max;
  } else {
    if (elem.height > max) elem.height = max;
  }
}

This function has been tested successfully against IE 6 and Firefox 1.5 (if you can verify this against others, please let me know and I will update this list). One thing worth mentioning is that only the longest side of the image needs to be resized to fit your maximum size. The aspect ratio will still be maintained by the web browser.

The resize function expects an image id and an optional maximum size. For this to work properly, the resizing must only occur after the image was loaded. This can be enforced by using the onload attribute of the image tag.

So, in pure HTML, this could be called like so:

<img id="some_image" onload="resize('some_image')" src="some_image.jpg" />

And in Ruby on Rails, this would look like:

<%= image_tag('some_image.jpg', {:id => “some_image”, :onload => “resize(’some_image’)”}) %>

Enjoy!

Source: http://atomgiant.com/2006/05/30/resize-images-with-javascript/

Terus ane kombinasikan menjadi:

<script type=”text/javascript”>
function resize(which, maxh, maxw) {
var elem = document.getElementById(which);
if (elem == undefined || elem == null) return false;
var ratio = maxh/maxw;
if (elem.height/elem.width > ratio){
// height is the problem
if (elem.height > maxh){
elem.width = Math.round(elem.width*(maxh/elem.height));
elem.height = maxh;
}
} else {
// width is the problem
if (elem.width > maxh){
elem.height = Math.round(elem.height*(maxw/elem.width));
elem.width = maxw;
}
}
}

</script>

<center><a style=”position:relative;z-index:1; color:blue” href=”<?=base_url();?>admin_ver2/product/<?=$im->images?>” rel=”facebox”><img id=”one<?php echo $count?>” src=”<?=base_url();?>admin_ver2/product/<?=$im->images?>” onload=”resize(‘one<?php echo $count?>’, 280, 400)” border=”0″ /></a></center>

*note: Tambah lagi kombinasikan dengan facebox,.. hehehe

Semoga bermanfaat.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s