渲染DICOM Monochrome2至HTML5 Canvas的正确像素映射问询

首先，你的代码存在两个核心问题：一是没有处理DICOM灰度渲染必须的窗宽窗位（WW/WL），二是错误地将16位像素数据拆分到RGB通道（Monochrome2是灰度图，三个颜色通道应该使用同一个灰度值）。下面是完整的正确实现步骤和代码：

核心概念先理清 #

• Monochrome2定义：DICOM的Monochrome2表示像素值越小，颜色越黑；像素值越大，颜色越白（和Monochrome1的白底黑字相反）。
• 16位像素数据：从你的代码rgbIdx += 2能看出，你的像素数据是16位（2字节）的，需要先将其转换为正确的数值（注意DICOM的字节序，通常用小端或大端，需根据文件的Transfer Syntax判断）。
• 窗宽窗位（WW/WL）：这是DICOM灰度渲染的核心，用来把原始像素值（可能是-1024~3071这样的CT值范围）映射到0-255的可见灰度区间。

完整实现步骤 #

1. 从DICOM数据集获取关键参数：需要拿到窗宽（WindowWidth）、窗位（WindowCenter）、像素数据的字节序、是否为有符号像素。
2. 解析16位像素数据：将每个2字节的原始数据转换为对应的数值。
3. 应用窗宽窗位映射：把原始像素值缩放到0-255的灰度范围。
4. 填充Canvas的ImageData：将灰度值赋值给RGBA的R、G、B通道，Alpha通道设为255。

修正后的代码示例 #

const ctx = canvas.getContext('2d');
const imageData = ctx.createImageData(512, 512);
const pixelData = getPixelData(dataSet);
// 从DICOM数据集获取窗宽窗位（实际要从dataSet中读取对应标签值）
const windowWidth = parseFloat(dataSet.string('x00281050')) || 2000;
const windowCenter = parseFloat(dataSet.string('x00281051')) || 500;
// 判断像素是否为有符号（比如CT图像是有符号的）
const isSigned = dataSet.string('x00280103') === '1';
// 字节序（DICOM默认小端，若为大端则第二个参数传false）
const littleEndian = true;

let rgbaIdx = 0;
const pixelCount = 512 * 512;

// 计算窗宽窗位的上下限
const lower = windowCenter - windowWidth / 2;
const upper = windowCenter + windowWidth / 2;

for (let idx = 0; idx < pixelCount; idx++) {
  // 读取16位像素值，根据是否有符号选择对应方法
  const pixelVal = isSigned 
    ? new DataView(pixelData.buffer).getInt16(idx * 2, littleEndian)
    : new DataView(pixelData.buffer).getUint16(idx * 2, littleEndian);
  
  // 应用窗宽窗位映射到0-255灰度区间
  let gray;
  if (pixelVal < lower) {
    gray = 0;
  } else if (pixelVal > upper) {
    gray = 255;
  } else {
    gray = Math.round(((pixelVal - lower) / (upper - lower)) * 255);
  }
  
  // 灰度图的RGB通道赋值为同一个灰度值，Alpha设为不透明
  imageData.data[rgbaIdx] = gray;     // R通道
  imageData.data[rgbaIdx + 1] = gray; // G通道
  imageData.data[rgbaIdx + 2] = gray; // B通道
  imageData.data[rgbaIdx + 3] = 255;  // Alpha通道
  
  rgbaIdx += 4;
}

ctx.putImageData(imageData, 0, 0);

关键代码解释 #

• 字节序处理：用DataView的getInt16/getUint16读取16位数据，第二个参数指定是否为小端字节序，需和DICOM文件的Transfer Syntax匹配。
• 有符号像素判断：比如CT图像的像素值是有符号的（范围通常是-1024到3071），必须用getInt16读取，否则会得到错误的数值。
• 窗宽窗位映射：这一步是让原始像素值转换为人眼可见的灰度范围，没有这一步的话，直接显示原始16位数据会因为超出0-255范围而显示异常。
• 灰度通道赋值：Monochrome2是灰度图，所以R、G、B三个通道必须使用同一个灰度值，这和你原来拆分字节到R、G通道的错误做法完全不同。

内容的提问来源于stack exchange，提问作者Lydon Ch