javascript - How to change window center and width of an image on mouse move event -
i have dicom
image , want apply w/l on image. in normal terms, trying change color of image drag mouse on it. becomes white when try change it.
here's doing.
this part of code.
var imagedata = ctx.getimagedata(0, 0, img.width, img.height); var data = imagedata.data; var pixels = imagedata.data, len = pixels.length; var = 256 * slope / window_width, b = 256 * ((intercept - window_level) / window_width); (i = 0; < len; += 4) { //pixval = * (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 = * (red * 256 + green + b); pixels[i] = pixels[i + 1] = pixels[i + 2] = pixelvalue; pixels[i + 3] = 0xff; //console.log(pixelvalue == pixval); }
here's jsfiddle complete code.
the main problem you're changing image data when drawing it. need store raw version of image data, "apply" window level dynamically when drawing. otherwise, you're compounding changes on top of each other.
try making 2 canvas objects: 1 (offscreen) load , store image data , other draw it. making relatively small change code, appeared work right.
there may other issues starting values -- think may missing rescale slope , intercept -- fixing first issue should make easier figure out.
here's jsfiddle: https://jsfiddle.net/8ne1pnaj/5/
var imagedata = ctxdata.getimagedata(0, 0, img.width, img.height); // ... ctx.putimagedata(imagedata, 0, 0)
ctxdata
original data. ctx
drawing context.
Comments
Post a Comment