How to display a jpg data in Canvas

[yzhou88]

Hi,
My browser connects to the server through Websocket and get jpg format picture, but how can I display it? can I display it in Canvas or something? Can someone help me?

I that canvas.putImageData can work a little, but how can we use a jpg data?

Thanks

[zcorpan]

Since Websocket only works with strings currently, I take it that you're sending it base64 encoded?

You could put it in <img src="data:image/jpeg;base64,JPEG_DATA_HERE">. If you want to paint it on a canvas, use drawImage(img, 0, 0).

[yzhou88]

Great!
Thanks for your help!

[JAB Creations]

Just a friendly heads-up, that method won't work in all browsers, mainly older versions of IE. I'm not sure which do and do not work though hopefully all versions of the browsers you plan to use do.

[yzhou88]

It's working. I have tried. In addition, here is an article about it.
http://en.wikipedia.org/wiki/Data_URI_scheme

Thanks again!