create an image from a byte array using javascript

Question

At the moment I use a generic - ASHX - handler (that is called via ajax/jquery) to load an image into an IMG element like so...

serverimage1x4.src = '/Cloud/LiveXP.ashx';

However, instead of this I would like a web worker to do this.

I am returning a byte array from a web worker and using 'postmessage' it back to the parent UI.

So, assuming I use a XMLHttpRequest to return a byte array to the UI how do I load that byte array into an Image/IMG element?

Would I be better of trying to load a canvas element instead?

possible duplicate of How to display image inside web form from Byte Array with C# — Assaf Lavie
– Assaf Lavie, Commented Apr 13, 2014 at 15:18
Hi, it is NOT a duplicate. I am using JavaScript not C# I need the equivalent of to C# — Andrew Simpson
– Andrew Simpson, Commented Apr 13, 2014 at 15:21
The accepted answer to that question answers your question as well... — Assaf Lavie
– Assaf Lavie, Commented Apr 13, 2014 at 15:23
actually i am too trigger happy here. My question states I already have a byte array. I wanted to know how to convert to an image using javascript. Using base64 on client side will inflate the image size. but thanks anyway — Andrew Simpson
– Andrew Simpson, Commented Apr 13, 2014 at 15:26
I'm pretty sure that's the way to do it. I wouldn't worry about "inflation" unless it's either extremely big images or extremely puny client devices. — Assaf Lavie
– Assaf Lavie, Commented Apr 13, 2014 at 15:28

Community · Accepted Answer · 2017-05-23 11:49:55Z

1

I think what you are looking for is putImageData().

Here's a usage example which arbitrarily modifies an existing canvas by manipulating a byte array:

  var image=draw.getImageData(0,0,W,H), data=image.data;
  for ( var y=0; y<H; y++ ) for ( var x=0; x<W; x++ )
    {
    var index=(x+y*W)*4;
    data[0+index]=x+y; // red
    data[1+index]=x; // green
    data[2+index]=255-data[2+index]; // blue
    data[3+index]=255; // alpha
    }
  draw.putImageData(image,0,0);

edited May 23, 2017 at 11:49

CommunityBot

11 silver badge

answered Apr 13, 2014 at 16:24

Brent Bradburn

55.7k19 gold badges164 silver badges191 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Andrew Simpson Over a year ago

Hi, thanks for this answer. So, image.data would be my byte array? Also, by enumerating through will it not incur a delay in displaying an image? I am wanting to refresh the image as quick as possible you see. I will test this though 1st - thank you

Brent Bradburn Over a year ago

@AndrewSimpson: In the simplest case, you would acquire image.data from the existing canvas as I have done here. You can then copy your byte array based on the example indexing that I have shown (replace my arbitrary changes with something that copies pixels from your byte array). I don't know about the speed -- it will probably be browser dependent.

Andrew Simpson Over a year ago

HI, this is all very informative and thanks for it. Will be testing it ASAP and will post back - thanks

Collectives™ on Stack Overflow

create an image from a byte array using javascript

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related