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

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

本文关键字：窗口 图像 鼠标 移动 事件      更新时间：2023-09-26

我有一个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。

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

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

您的起始值可能还有其他问题 - 我认为您可能缺少重新缩放斜率和截距 - 但修复第一个问题应该使一切更容易弄清楚。

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

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

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

相关文章：