Can I resize images using JavaScript (not scale, real resize)

I need to dynamically load and put on screen huge number of images — it can be something like 1000–3000. Usually these pictures are of different size, and I'm getting their URLs from user. So, some of these pictures can be 1024x800 or 10x40 pixels.

I wrote a good JS script showing them nicely on one page (ala Google Images Search style), but they are still very heavy on RAM used (a hundred 500K images on one page is not good), so I thought about the option of really resizing images. Like making an image that’s 1000x800 pixels something like 10开发者_运维技巧0x80, and then forget (free the ram) of the original one.

Can this be done using JavaScript (without server side processing)?

I would suggest a different approach: Use pagination.

Display, say, 15 images. Then the user click on 'next page' and the next page is shown.

Or, even better, you can script that when the user reaches the end of the page the next page is automatically loaded.

If such thing is not what you want to do. Maybe you want to do a collage of images, then maybe you can check CSS3 transforms. I think they should be fast.

What you want to do is to take some pressure from the client so that it can handle all the images. Letting it resize all the images (JavaScript is client side) will do exactly the opposite because actually resizing an image is usually way more expensive than just displaying it (and not possible with browser JS anyway).

Usually there is always a better solution than displaying that many items at once. One would be dynamic loading e.g. when a user scrolls down the page (like the new Facebook profiles do) or using pagination. I can't imagine that all 1k - 3k images will be visible all at once.

There is no native JS way of doing this. You may be able to hack something using Flash but you really should resize the images on the server because:

1. You will save on bandwidth transferring those large 500K images to the client.
2. The client will be able to cache those images.
3. You'll get a faster loading page.
4. You'll be able to fit a lot more thumbnail images in memory and therefore will require less pagination.
5. more...

I'm (pretty) sure it can be done in browsers that support canvas. If this is a path you would like to take you should start here.

I see to possible problems with the canvas approach:

1. It will probably take a really long time (relatively speaking) to resize many images. Because of this, you're probably going to have to look into utilizing webworkers.
2. Will the browser actually free up any memory if you remove the image from the DOM and/or delete/null all references to those images? I don't know.

And some pretty pictures of a canvas-resized image:

this answer needs a ninja:--> Qk