A few weeks ago, I did a medical display CT image project. I needed to parse and display the DICOM file and adjust the brightness and contrast of the image on the page. It took a lot of effort to make this function (although it is not the window width/window level in the DICOM file, but it is also a kind of knowledge learning), so I record it here to deepen my memory and facilitate future reference.
canvas API and tutorial
It is not suitable to use img element in the page because of the need to operate on the picture (adjustment of light and shade and contrast, inversion), and the canvas element provided in HTML5 can specify a canvas and draw and process on it, so show Use canvas for images. The tutorial on using canvas is very detailed in MDN. Attach the connection to the Canvas API here.
Image brightness and contrast adjustment
Through this tutorial, in addition to understanding how to draw pictures in canvas and how to use pictures, the other knowledge is that the adjustment of the brightness of the picture is to increase or decrease the color value of the pixel, and the color value of 255-current pixel can be reversed. . But there is no example of contrast adjustment in the question. Therefore, the algorithm for contrast adjustment found on the Internet is recorded here.
The most commonly used algorithm for adjusting contrast on the Internet is to adjust according to the grayscale of the image
Here is the algorithm:
1. Calculate the average brightness
2. Compare each point with the average brightness to get the difference.
3. New brightness = average brightness + coefficient * difference
4. According to the new brightness, calculate the new rgb (keep the hue unchanged)
Original address: Several methods of adjusting contrast in digital image processing
Trigger events by mouse swipe
In many DICOM parsing tools, the operation of holding down the mouse left and right or sliding up and down to adjust the image brightness and contrast (ie window width and window level) is provided. So here we also need to add this function when the user operates. This problem is relatively easy to solve, as long as the mouse is clicked when the mouse movement event is triggered in the canvas element, and then the pixels can be correspondingly operated according to the displacement of the abscissa and ordinate of the mouse. When adjusting, the following displacement and The adjustment of pixel value to prevent the picture from changing too much when moving the mouse .
initial size of canvas
The canvas tag has only two properties - width and height. These are optional and are also set using DOM properties. When no width and height are set, the canvas will be initialized with a width of 300 pixels and a height of 150 pixels. When loading a picture with canvas, the knowledge draws the picture inside the current canvas, so the canvas will not automatically change its width and height according to the size of the picture after it is defined. So if you want the width and height of the canvas to be the same as the picture, you need to know the width and height of the picture first, and then draw the picture after setting the width and height of the canvas.
Summarize
In this process, although it took a lot of time and experience, most of it was used in canvas learning and mouse event processing. If you are familiar with this writing, you can basically write this thing easily. In the process of writing, I also encountered some problems caused by poor thinking. For example, after inverting the color, I adjusted it and returned to the state before inverting the color. Press and hold the mouse to draw the canvas range, then press and hold it and slide it back, which will affect the picture. The adjustment caused by the adjustment and the basic image data was not saved at first, resulting in the inability to restore the original image after the image adjustment, etc., I believe it can be solved after thinking.
Attached here is my demo's connection image shading and contrast adjustment DEMO