Convert PictureStream to HTML5 Canvas

Question

I am extracting an byte array from pictureStream from a .net webservice. The response of the JSON byte array is as follows:

[137, 80, 78, 372, 617 more...]

I am trying to convert this byte array and draw it into an HTML canvas like this

var context = document.getElementById('boxcover').getContext('2d');
context.putImageData(movies.PictureStream, 0, 0);

But that does not work. I do not have access to change the web service, so I want to convert this byte array to an image using Javascript only. In addition, I can not use scripts on the server side, only on the client side.

thanks for the help

Here's an example of how an array of bytes comes in: http://www.copypastecode.com/33072/

Answer 1

, . RGB RGBA, getImageData/putImageData, , , Kieranmaine.

- jpeg , , , . 64, dataURI, , dataURI drawImage, .

URI , mime. , .

'data:image/png;base64,' + btoa(String.fromCharCode.apply(this, byteArray));

src img , , drawImage() .

Answer 2

getImageData (x, y, width, height), .

, , 3 , getImageData, , . url:

http://jsfiddle.net/WXfPF/1/

. getPixel HTML Canvas?.