What is the best and quickest way to resize images on the client side using JavaScript?
EDIT: Sorry, I meant the best way to display an image resized on the client side..
A:
I'm not sure if you mean actually resize the image or just set the size that the image is displayed at. One is impossible, the other would be to set the width and height properties using jQuery.
Spencer Ruport
2009-06-10 03:48:38
A:
If you're wanting to do it in a statement then the height and width properties would most likely be best.
If you're wanting something animated, you can use the .animate(...) command and set the height and width as parameters. That should make the image change a smooth transition.
Hugoware
2009-06-10 03:52:32
A:
Images should always be served at the size they are to be displayed. It is better to have multiple copies on the server instead of copying one file over the network and trying to manipulate on client side. Consider this:
- waste of network resource to transfer 500X400 image when you actually need 100X80
- similar waste of CPU in some imaging API to shrink/ enlarge the image on client side
Resizing an image is not plain change of height/ width. When you specify a size different than (either through styles, script etc) the original image size, the browser will use native API (win32 draw for example) to properly shrink/enlarge the image. Cropping the image (losing portions of image) is easier but seldom wanted.
Sesh
2009-06-10 04:31:28
-1 for "always should be served". Reusing the same image at different sizes can be useful to save bandwidth. Additionally when allowing users to import images (for example in a forum) you may want to resize.
Pool
2010-01-27 21:44:33
+2
A:
Easy.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Client-Side Image Resize (Why?!)</title>
<script type="text/javascript">
window.onload = function() {
var url = "http://www.google.com/intl/en_ALL/images/logo.gif";
var img = new Image();
img.onload = function() {
var w = parseInt((this.width + "").replace(/px/i, ""), 10);
var h = parseInt((this.height + "").replace(/px/i, ""), 10);
// 50% scale
w = (w / 2) + "px";
h = (h / 2) + "px";
var htmlImg = document.createElement("img");
htmlImg.setAttribute("src", url);
htmlImg.setAttribute("width", w);
htmlImg.style.width = w;
htmlImg.setAttribute("height", h);
htmlImg.style.height = h;
document.body.appendChild(htmlImg);
}
img.src = url;
}
</script>
</head>
<body>
<h1>Look, I'm Resized!</h1>
</body>
</html>
Josh Stodola
2009-06-10 05:39:52
+1
A:
If you are not too put off by flash, with flash10 now you have the choice of processing uploaded files on the client side before sending them to the server. So you could use a hidden/transparent/small flash object to allow the client to upload their image, have flash resize the image(it has some good image manipulation apis), then send the byte data to the server.
the as3 core lib has a jpeg and png encoders if you want to encode the image to either format before uploading.
If you don't have flash you can always download the flex 3(or 4) sdk and use flashdevelop to do it all gratis =)
justlost
2009-06-10 06:06:21
+1
A:
Resizing before uploading would be a very powerful tool. This would reduce the time it takes to upload images to a server. Often our users have 5 mega-pixel images fresh off of their cameras and they have no clue how to reduce the size using an image editor. What we want uploaded is a 1500 pixel wide photo, jpg or png compressed to less than 500Kbytes.
This outfit Thin File claims to be able to do it but I haven't checked it out yet. I was rather hoping to find a way to use JQuery to do the same thing.
Bob Brunius
2009-10-05 20:36:27
+1
A:
flash 10 has support for resizing images on client side:
A:
can we resise image file at client side before uploading to reduce its size to save time of uploading?
neenu
2010-01-20 06:28:55
A:
http://www.shift8creative.com/projects/agile-uploader/index.html Resize before upload. Flexible, tight JavaScript integration, let's you use any back-end language, fast, good quality image.
A nicer demo than the main page that shows off the JavaScript integration: http://www.shift8creative.com/projects/agile-uploader/advanced-demo.html
Free as in beer. Hope it helps.
Tom
2010-02-23 20:53:17