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

【问题标题】：How to display data in a Uint16Array as an image in Javascript/HTML5?如何在 Javascript/HTML5 中将 Uint16Array 中的数据显示为图像？
【发布时间】：2018-04-25 17:36:42
【问题描述】：

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

谢谢。

【问题讨论】：

您将使用 putImageData 完成工作。
感谢您的提示。现在，我创建了一个新的 Uint8ClampedArray 并运行一个循环将 Uint16Array 中的所有数据放入新的 Array 中。然后我使用 putImageData 函数将其粘贴到画布上。你知道这是否是唯一的方法，因为循环非常昂贵？
所以你有一个答案：你应该把它贴在下面。我会看看是否有可能的改进。我想知道在数组上采用 Uint32 视图并处理 4 x 4 字节是否可以加快速度（var view32 = new Uint32Array(imgdata.data.buffer) ）。（但这在FF中是行不通的……）而且不要忘记只创建一次imgData，然后重复使用，创建时间很长。

标签： javascript html5-canvas

【解决方案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);

上述工作完美无缺。

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

【讨论】：

【解决方案2】：

这是我的代码，其中包含 Uint8Array displayBuffer 现有变量。您可以使用 data.set() 魔术来代替循环：

            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?

【讨论】：