How to display data in a Uint16Array as an image in Javascript/HTML5?

Question

I am trying to display image data from a DICOM file. I have parsed the file and extracted the 16 bit greyscale image into a Uint16Array. I think it is a convenient format if I want to pass this to WebGL as a texture, but what to do if I want to paste this onto a canvas ?

Thanks.

Thanks for the tip. Right now, I make a new Uint8ClampedArray and run a loop to put all the data from the Uint16Array into the new Array. Then I use the putImageData function to paste it onto the canvas. Do you know if this is the only way because the loop is quite expensive ? — xperien
– xperien, Commented Oct 27, 2014 at 7:18
So you have an answer : you should post it below. I'll see if there are possible improvements. I wonder if taking a Uint32 view on the array and dealing with bytes 4 by 4 could speed up things (var view32 = new Uint32Array(imgdata.data.buffer) ). (But this wouldn't work in FF...) And don't forget to create only once the imgData, then re-use, creation is very long. — GameAlchemist
– GameAlchemist, Commented Oct 27, 2014 at 9:25

xperien · Accepted Answer · 2014-10-28 01:05:48Z

Thanks @GameAlchemist.

I found this to work for me.

// get the image data (16 bit unsigned array of intensities) from the ArrayBuffer
pixelData = new Uint8Array(arraybuffer, frameOffset, numPixels);

// set up canvas
var imageCanvas = document.getElementById('canvas_1');
imageCanvas.setAttribute("width", rows);
imageCanvas.setAttribute("height", columns);
var ctx = imageCanvas.getContext('2d');

// imageData is Uint8ClampedArray
var imageData = ctx.getImageData(0, 0, imageCanvas.width, imageCanvas.height);

// this part seems slow :( 
for(var i = 0; i < numPixels; i++) {
    imageData.data[4*i] = (pixelData[i]*255)/4095;
    imageData.data[4*i+1] = (pixelData[i]*255)/4095;
    imageData.data[4*i+2] = (pixelData[i]*255)/4095;
    imageData.data[4*i+3] = 255;
}

ctx.putImageData(imageData, 0, 0);

The above works flawlessly.

Is there something that I am missing which can make it faster ?

thomasL · Accepted Answer · 2018-04-25 09:36:42Z

1

Here is my code with a Uint8Array displayBuffer existing variable. Instead of the loop, you can use the data.set() magic:

            var tlCanvas = document.getElementById("tlCanvas");
            tlCanvas.width = width;   // width defined in displayBuffer
            tlCanvas.height = height; // height defined in displayBuffer

            var tlCtx = tlCanvas.getContext('2d');
            var imgData= tlCtx.createImageData(width, height)
            imgData.data.set(displayBuffer); 
            tlCtx.putImageData(imgData, 0, 0);

Some complement info here: How to create a new ImageData object independently?

answered Apr 25, 2018 at 9:36

thomasL

6697 silver badges7 bronze badges

Collectives™ on Stack Overflow

How to display data in a Uint16Array as an image in Javascript/HTML5?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related