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)