How to resize a Base64 encoded Data URI PNG using javascript?

Question

I have a Base64 encoded PNG squeezed out of a web socket into a web page, that I display using Data URI

    <img src="data:image/png;base64, --base64 png-- ">

Is there a way in javascript or some of its flavours to resize the image I receive into a smaller base64 data URI equivalent, as to dinamically generate a thumbnail version of the given image?

Or maybe I could just duplicate the HTML Image object and play with it as a whole, using some obscure jQuery magic trick that I haven't find out yet.

If this can be done in javascript on client side, I could avoid another HTTP request to my server deamon, which would take some time to reprocess and deliver the resized image.

Answer 1

You can clone image with jQuery, and as for resizing - maybe trivial changing width and height of html element?

$('.somewhere img').clone().appendTo('.elsewhere').width(16).height(16)

Answer 2

The Pixastic library will do that and it work surprisingly fast, even on a mobile device.

Try someting like :

    Pixastic.process(image, "resize", { "width" : 200, "height" : 200 }, function (oCanvas){ //callback code here});

I struggled though with the fact that you give it an image and it return a Canvas, took me weeks to understand what was going on !!! Now I use Canvas2Image I found somewhere on the web to get back to an image.

Answer 3

The maxImage plugin claims to be able to resize images. TMMV, I have not tried this myself.