如何在鼠标移动事件中更改 window 图像的中心和宽度

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

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

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

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

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

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

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

如何在鼠标移动事件中更改 window 图像的中心和宽度

How to change window center and width of an image on mouse move event

html

javascript

jquery

dicom