Convert PictureStream to HTML5 canvas

I am retrieving a byte array of a pictureStream from a .net webservice. the JSON byte array response looks like this:

[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 this doesn't work. I have no access the modify the webservice, so I am looking to convert this byte array into a picture using Javascript only. Also, I can't use server side scripting, client side only.

Thanks for the help

Here is an example of how the byte array comes in : http://www.copypastecode.com/33072/

It depends what exactly is in the byte array. If it's a series of RGB or RGBA values, you can use getImageData/putImageData to draw it such as Kieranmaine mentioned.

But if the byte array is simply the data from a jpeg or other image format, you likely won't be able to access the individual pixel data in that manner. In such a case you might try converting it to base 64 to create a dataURI, creating an image element, setting the source to that dataURI and using drawImage to place it on the canvas.

To convert from a byte array to a data URI, you'll need to know the mime type first. But if you know it, try this code.

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

After setting the src attribute of the img element it's possible you may need to wait for its load event to fire before calling the context's drawImage() method.

You need to retrieve the canvas image data using the method getImageData(x, y, width, height) and then modify each pixel with values from your byte array.

I've created a small demo that draws red, green and blue 3 pixel long lines by calling getImageData and then update the image data using a byte array. Here's the url:

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

Also see this answer for additional information getPixel from HTML Canvas?.