CODEWITHSUNDEEP
javascriptjquerybase64image-resizingdata-uri
Francesco
Francesco

Reputation: 315

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

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.

Upvotes: 5

Views: 8721

Answers (3)

Raymond
Raymond

Reputation: 751

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.

Upvotes: 1

Jacek Kaniuk
Jacek Kaniuk

Reputation: 5229

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)

Upvotes: 2

Soren
Soren

Reputation: 14708

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

Upvotes: 0

Related Questions