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

主要问题是您在绘制图像数据时需要更改图像数据。您需要存储图像数据的原始版本，然后＆＃34; apply＆＃34;绘图时动态显示窗口级别。否则，您只是将更改复合在一起。

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

您的起始值可能还有其他问题 - 我认为您可能缺少重新缩放斜率和拦截 - 但修复第一个问题应该可以让所有内容更容易理解。

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

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

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

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

1 个答案: