display image by using uint16array data

Question

I am doing a DICOM project using XTK library. Now I need to create a list of thumbnails from input DICOM files (output images could be PNG or JPG).

During the rendering process, XTK provides an array of pixel data in an Uint16Array of each DICOM file. But I have no idea about converting those pixel data into a canvas.

I searched for some related articles or questions but found nothing possible.

Answer 1

Nowadays, ImageData has become a constructor , that you can put on a 2d context easily.

What it expects as arguments is an UInt8ClampedArray, a width and a height.

So from an Uint16Array representing rgba pixel data, you'd just have to do

var data = your_uint16array;
var u8 = new Uint8ClampedArray(data.buffer);
var img = new ImageData(u8, width, height);
ctx.putImageData(img, 0,0);

But according to your screenshot, what you have is actually an Array of Uint16Array, so you will probably have to first merge all these Uint16Arrays in a single one.

Also note that an Uint16Array is a weird view over an rgba pixel data, Uint32Array being more conventional (#ffff vs #ffffffff).