javascriptcanvasdicomxtkuint16

display image by using uint16array data

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.

unnecessary screenshot of what I am looking at

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

Solution

  • 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).