How to resize Javascript images?

Question

So, I create a few images like this:

images = [];

images[0] = new Image();
images[0].src = "bla.jpg";

images[1] = new Image();
images[1].src = "bla1.jpg";

images[2] = new Image();
images[2].src = "bla2.jpg";

This isn't the actual loading algorithm, but the product is the same: I'm left with an array called "images", which, of course, contains a few images.

I'm making a game, and I need to resize the canvas, to fit the screen size of the player. I know how to do that, but now, I need to resize all of the images as well. I don't know how to do that.

My initial approach was this:

for (var i = 0; i < images.length; i ++)
{
    images[i].width *= ratio; // newWidth/defaultWidth
    images[i].height *= ratio;
}

I didn't notice a change, though, so I did this, just to be sure:

for (var i = 0; i < images.length; i ++)
{
    images[i].width = 3; //I'd probably notice if every image in the game was shrunk to this size
    images[i].height = 3;
}

This was even stranger. The images, again, remained unchanged, however, the game slowed a lot. The FPS went down to 0.5 or something similar.

Now, how do I go about resizing images?

EDIT: I do not, of course, wish to resize the images in real time like this:

context.drawImage(image, x, y, image.w*r, image.h*r);

Because in my experience, it greatly reduces the performance.

If you use the browser to dynamically scale images like you are trying to do, rendering performance will be substantially reduced because the browser has to scale the image at draw time. Some browsers may be better than others at caching the pre-scaled bits, but some are not good at it and performance definitely deteriorates when you scale images like this. — jfriend00
– jfriend00, Commented Apr 6, 2012 at 16:23

Marc Gagne · Accepted Answer · 2012-04-06 16:27:58Z

2

Instead of setting width & height attributes, set the css properties instead:

var i, image;
for ( i = 0; i < images.length; i++ )
{
    image = $( images[i] );
    image.css( 'width', image.width() * ratio );
    image.css( 'height', image.height() * ratio );
}

edited Apr 6, 2012 at 16:27

answered Apr 6, 2012 at 16:21

Marc Gagne

8195 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

maerics Over a year ago

Note that you can also do this with plain JavaScript (if jQuery is not being used) as images[i].style.width = images[i].style.width * ratio.

Marc Gagne Over a year ago

Good point, I've been doing so much jQuery development lately I just defaulted to it :)

Marc Gagne Over a year ago

Perhaps there is another issue at hand, could you post a more comprehensive example? Also which browser are you testing with?

Andrew Leach · Accepted Answer · 2012-04-06 16:29:28Z

1

When you set the dimensions in Javascript, they should be assigned as strings. Numbers won't work. If you need to do calculations, then convert the result to a string.

 images[i].width = (images[i].width*ratio).toString(); // newWidth/defaultWidth
 images[i].height = (images[i].height*ratio).toString();

answered Apr 6, 2012 at 16:29

Andrew Leach

13k1 gold badge44 silver badges48 bronze badges

3 Comments

Andrew Leach Over a year ago

Works for me (in Firefox, at least). I test things before writing answers.

Andrew Leach Over a year ago

@Bane: Well this is embarrassing. I've no idea what I did to get the result I got. The best I can come up with is jsfiddle.net/HVqKd/1 It is apparent though that Javascript Image objects are not related to the browser <img> element which renders images: dimensions can be set (and don't need .toString() -- what?!) but don't affect what the browser does. How are you displaying your Image objects?

corazza Over a year ago

Actually, no problem. I chose to go with fixed dimensions, it's simply much simpler. Can't please everyone...

Collectives™ on Stack Overflow

How to resize Javascript images?

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related