CODEWITHSUNDEEP
javascripthtml5-canvas
xperien
xperien

Reputation: 53

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

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.

Upvotes: 3

Views: 2156

Answers (2)

thomasL
thomasL

Reputation: 669

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?

Upvotes: 1

xperien
xperien

Reputation: 53

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 ?

Upvotes: 2

Related Questions