Home/ Questions/Q 945637
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T22:47:02+00:00

I am retrieving a byte array of a pictureStream from a .net webservice. the

  • 0

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/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0