如何使用 DICOM 文件中的像素数据创建画布？

Question

I'm currently working on a project that deals with DICOM files. I had success in parsing data from a collection of DICOM files. The problem occurs when I try to deal with the pixel data of a DICOM file and pass it to a canvas in order to show it.

I have used "Dwv" library to parse the DICOM file. It helped me to get the pixel data as an array and pass it to function that create the new ImageData of the canvas context.

function buildCanvas(width, height, pixelData) {
    var imgData = context.createImageData(width, height);
    for (var i = 0; i < imgData.data.length; i += 4) {
        var x = (i / 4) % 40;
        imgData.data[i] = pixelData[x];
        imgData.data[i + 1] = pixelData[x + 1];
        imgData.data[i + 2] = pixelData[x + 2];
        imgData.data[i + 3] = 255;
    }
    console.log(pixelData);
    context.putImageData(imgData, 0, 0);
}

Following is a result I get:

As you can see, the output image is completely messed up. What is the better approach to solve this problem.

Answer 1

DICOM data can store RGB data but the most usual is monochrome data. This is defined in the Photometric Interpretation tag (referenced as (0028,0004)). If you are dealing with monochrome data, the dwv library will return an array with the raw values of the slice and of size number of rows * number of columns . The output canvas array is RGBA so it will be 4 times bigger. Your loop could look like:

    var j = 0; 
    for (var i = 0; i < pixelData.length; ++i) {
        imgData.data[j++] = pixelData[i];
        imgData.data[j++] = pixelData[i];
        imgData.data[j++] = pixelData[i];
        imgData.data[j++] = 255;
    }

The problem now is that the DICOM data is not scaled in the [0,255] range, that's where the window center/width comes into play. Check the standard to understand how to interpret it. The dwv library also contains example code to help you.