Change the dimensions of a image in jQuery

Question

Is there a way to change (making bigger) the size of image without compromising the quality of the image in jQuery?

score 3 · Answer 1 · answered Jan 13 '12 at 08:33

I don't think you can, the quality of the image is, well, the quality of the image...increasing the dimensions would just be like zooming in on that image.

If you're asking whether or not jQuery can resample an image, the simple answer is no, and short of sending AJAX requests to a server which can do the resampling in a scripting language like PHP, there's not much you can do to keep its quality unfortunately.

I hope this helps! :)

score 3 · Accepted Answer · edited May 23 '17 at 12:18

3

This is just resize, but you can't resize them without losing quality.

var max_size = 200;

$("img").each(function(i) {
  if ($(this).height() > $(this).width()) {
    var h = max_size;
    var w = Math.ceil($(this).width() / $(this).height() * max_size);
  } 
  else {
    var w = max_size;
    var h = Math.ceil($(this).height() / $(this).width() * max_size);
  }

  $(this).css({ height: h, width: w });

});

More examples:

edited May 23 '17 at 12:18

Community

1
1

answered Jan 13 '12 at 08:35

Sameera Thilakasiri

9,452
10
51
86

@luckyluke Thanks for your appreciation, but if you really satisfy with the answer, you should accept the answer and make it up-vote, it gives you reputation too. – Sameera Thilakasiri Jan 16 '12 at 04:21

score 2 · Answer 3 · edited May 23 '17 at 10:28

You can't resize without affecting quality with clientside JavaScript in normal raster images (bmp,jpg,png,etc), as the quality of the image is finite, one way could be to use a very high quality image 8000x8000 and then reduce it to the size you want with css.

 img{
   width:800px;
   height:600px;
 }

You can then use jquery to resize it, and you won't notice a quality reduction until you start getting to over the original resolution, which in this case is 8000x8000

 $("img").css("width","1024px");
 $("img").css("height","768px");

There are lots of questions covering re-sampling serverside using whatever language it is

Update

You haven't said what image format you are using, you could consider using SVG, and HTML5 then you will be able to resize to any size clientside without reduction in quality.

score 0 · Answer 4 · answered Jan 13 '12 at 08:35

0

you can scale an images with jquery by changing their width and height attributes. I don't really get the part of about the image quality being compromised though as the image quality would be well, the same as you've uploaded it.

answered Jan 13 '12 at 08:35

XepterX

1,017
6
16

thanks XepterX. Speaking of image quality i'm concerned about avoiding the pixelated display of resulting output. – luckyluke Jan 16 '12 at 03:34
you could avoid that by uploading a high resolution pic then resizing it using css. – XepterX Jan 16 '12 at 03:45

score 0 · Answer 5 · edited May 23 '17 at 12:18

0

jQuery is not intended to do image optimization. It has no graphics primitives. Why would you like to do that in javascript ? You don't have a server-side language ?

Anyway, you should look at the canvas for doing this. Have a look at this SO post or this one

edited May 23 '17 at 12:18

Community

1
1

answered Jan 13 '12 at 08:36

Grooveek

10,046
1
27
37

score 0 · Answer 6 · answered Jan 13 '12 at 08:39

jQuery contains no direct method for doing that. You can probably find a solution that uses Flash or maybe an Applet.

OR

You can try rendering your image to a canvas and then apply a scaling routine (bilinear, bicubic etc..) to the pixels in the canvas and render the output to another canvas. Once done, you can get the image data from the canvas and send it back to your server via AJAX for saving. For more info on scaling algorithms, refer: check: http://en.wikipedia.org/wiki/Image_scaling)

Thanks techfoobar. i'll try that – luckyluke Jan 16 '12 at 03:37 — luckyluke, Jan 16 '12 at 03:37

Change the dimensions of a image in jQuery

6 Answers6