javascript - 如何在鼠标移动事件时更改窗口中心和图像宽度

Question

我有一个 DICOM 图像，我想在该图像上应用 W/L。一般来说，当我将鼠标拖动到图像上时，我试图更改图像的颜色。然而，当我尝试改变它时，它变得完全白色。

这就是我正在做的事情。

这只是代码的一部分。

var imageData = ctx.getImageData(0, 0, img.width, img.height);
var data = imageData.data;

var pixels = imageData.data,
    len = pixels.length;
var a = 256 * slope / window_width,
    b = 256 * ((intercept - window_level) / window_width);

for (i = 0; i < len; i += 4) {
    //pixval = a * (pixels[i] * 256 + pixels[i + 1]) + b;
    //pixels[i] = pixels[i + 1] = pixels[i + 2] = pixval

    if (pixels[i + 3] == 0)
        continue;

    var pixelIndex = i;
    var red = pixels[pixelIndex]; // red   color
    var green = pixels[pixelIndex + 1]; // green color
    var blue = pixels[pixelIndex + 2]; // blue  color
    var alpha = pixels[pixelIndex + 3];

    var pixelValue = a * (red * 256 + green + b);
    pixels[i] = pixels[i + 1] = pixels[i + 2] = pixelValue;
    pixels[i + 3] = 0xff;
    //console.log(pixelValue == pixval);

}

这是JSFIDDLE带有完整的代码。

Answer 1

主要问题是您在绘制图像时更改了图像数据。您需要存储图像数据的原始版本，然后在绘图时动态“应用”窗口级别。否则，您只是将更改叠加在一起。

尝试创建两个 Canvas 对象:一个(屏幕外)用于加载和存储图像数据，另一个用于绘制图像数据。对您的代码进行这个相对较小的更改，它似乎工作正常。

您的起始值可能存在其他问题 - 我认为您可能缺少重新调整斜率和截距 - 但解决第一个问题应该会使一切更容易弄清楚。

这是 jsfiddle:https://jsfiddle.net/8ne1pnaj/5/

var imageData = ctxData.getImageData(0, 0, img.width, img.height);
// ...
ctx.putImageData(imageData, 0, 0)

ctxData 是原始数据。 ctx 是绘图上下文。