Geek Answers Handbook

Bicubic-ly Resize Images Using Javascript

Is there a way to resize the actual image using JavaScript? I'm not talking about changing the DOM to resize the image in the browser. I actually want to resize the image pixel data and then display this.

Basically my problem is that Firefox completely fails when reducing images with delicate features, since it only has Nearest Neighbor and Binlinear. Every other browser, even IE, has Bicubic support. There talk of this will be included soon, but this conversation has been going on for over a year.

I don't mind downloading full size images because I want them to load anyway. When a user hovers over a small version of an image, a large version immediately appears elsewhere on the page. If I did resizing on the server side, I would have to upload BOTH copies of the images, which would lead to even more traffic. If there is no other workaround, then this is what I need to do ... I just don't want to.

+4
source share
1 answer

It is possible. You get the image in the same domain, write to the canvas, and then manipulate the pixel data (difficult, but maybe I'm sure), and then either use this or output it as png / gif / jpg ... BUT ... I don’t I think that you will find that this is the best way to preserve the delicate CSS features.

+1
source

More articles:


All Articles