Question

我正在尝试显示DICOM文件中的图像数据。我解析了文件并将16位灰度图像提取到Uint16Array中。我认为这是一种方便的格式，如果我想将它作为纹理传递给WebGL，但如果我想将它粘贴到画布上该怎么办？

感谢。

Answer 1

谢谢@GameAlchemist。

我发现这对我有用。

// 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);

以上工作完美无瑕。

我有什么遗漏可以让它更快吗？

Answer 2

这是我的代码，带有Uint8Array displayBuffer现有变量。您可以使用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);

这里有一些补充信息：How to create a new ImageData object independently?

如何在Uint16Array中将数据显示为Javascript / HTML5中的图像？

2 个答案: