javascript中的图像缩放和像素数据的HTML5算法会产生粗糙的图像吗？

Question

我正在尝试使用javascript和HTML5 canvas使用Cornerstone DICOM解析器(https://github.com/cornerstonejs/dicomParser)来提取用于CT扫描的像素数据。我需要能够减少默认像素数据的大小。使用的是hermite调整大小算法：https://github.com/viliusle/Hermite-resize

请看我下面的概念证明，它显示了上腹部的轴向切片：http://castlemountain.dk/dicomParser/index2.html

正如您可以看到的，生成了两种类型的压缩图像(图像2和图像3)，其中图像2明显比图像3更粗糙(特别是在查看肋骨时)。我使用相同的压缩算法，但当从未压缩的像素数据(图1)中获取像素数据时，图像3的图像质量会更好，我似乎不知道为什么会这样。与HTML5画布相关吗？

示例如下：

首先，我提取512x512px CT图像的CT像素数据，然后使用CT窗口/电平将其转换为0-255灰度值(方法convertToGreylevel)。然后，此灰度像素值数组用于为HMLT5画布生成imageData对象(imgData)，这将显示为未压缩的图像(图1)：

ctx.putImageData(imgData,0,0);

接下来是函数

pixelData2 = resample_hermite(pixelData[slices], 512, 512, 
Math.round(512/compression2), Math.round(512/compression2));

用于生成压缩的像素数据(256x256px)，用于生成imageData对象，如图2所示：

ctx.putImageData(imgData2,512,0); 

之后，

var imgInput = ctx.getImageData(0, 0, 512, 512);

用于从绘制到画布的第一个512x512图像中获取imageData。画布中的像素数据被提取出来，并用于生成一个像素数据数组，该数组被压缩为：

var outputData = resample_hermite(inputData, 512, 512,Math.round(512/compression2), Math.round(512/compression2));

生成的像素数据数组(256x256像素)用于生成HMTL5图像对象，如图3所示：

ctx.putImageData(img2, 512, Math.round(512/compression2));

图2肯定比压缩的图3更粗糙(见白色肋骨)。谁能告诉我为什么会这样？

诚挚的问候

Answer 1

看起来你使用的是旧的Hermite-resize lib版本，你有"0.5“的操作，但是原始的lib没有任何类似的东西。

修复resample_hermite函数后(基本上删除了0.5，但我建议使用github的最新代码)，结果要好得多。