PACS--HTML5 image processing based on HTML5

Prior to this, the system was a JPG image returned by JavaScript in the browser, in conjunction with the Dicom Wado standard. This server-side resolution, the way the client shows, to achieve image movement, scaling, rotation, measurement and other image operations can achieve real-time interaction. But there are a few drawbacks to this approach:

1. To obtain the CT value (calcification value) information on the image, interact with the server frequently.

2. Adjust the window width of the image or reverse the color of the image, and the server to interact with frequently.

3. Measurement of the image (rectangular measurement, ellipse measurement, etc.) can only obtain a simple information of face value and circumference, which is not much useful to the doctor's diagnosis, the actual application needs to know the measured area of the maximum, minimum, variance, mean, and other measurement information.

This shortcoming boils down to the point that there is no local manipulation of pixel information. However, HTML5 's ability to handle pixel-level processing has been well supported, and completion enables client-side manipulation of pixel information. so in order to solve the above problems recently made a larger upgrade to the system. That is, the client side directly operation Dicom pixel data for the generation of JS-side image and the JS end to achieve window width adjustment.

To get the pixel data in Dicom, consider the following two ways:

A: The server side directly in the way of byte stream return dicom file, the client uses JS to receive byte stream, and is responsible for parsing dicom image data, this way not only according to the DICOM transmission Syntax (0002,0010) Transfer Syntax UID, but also according to ( 0028,0002) Samples per pixel, (0028,0004) photometric interpretation, (0028,0010) Rows, (0028,0011) Columns, (0028,0100) Bits allocated, (0028,0103) Pixel representation and other tags to determine the structure of the pixel data, complex points may also use the lookup table to find ((0028,0004) photometric The value of interpretation is equal to ==palette COLOR). For non-compressed display VR or Stealth VR, (0028,0004) photometric interpretation equals MONOCHROME1 or MONOCHROME2, JS parsing pixel data is really convenient, but dicom file a variety of , it is really laborious to write JS files that include the transmission syntax and the various pixel structures. Also take into account the multi-frame dynamic image, if the multi-pin image is large, the entire file is downloaded to parse the browser will completely collapse. So I think this way is not very feasible. (although this process is implemented in the display of the VR dicom file JS parsing, but the halfway to consider the complexity and difficulty is abandoned).

B: From the server side to obtain the Dicom file pixel array, since the current based on the C/s mode of PACs is quite mature, a variety of third-party open source dicom parsing tools such as dcmtk,dcm4che,mdcm,opendicom, etc. is also quite a lot, It is also quite handy to get pixel data using the Open Source Dicom parsing tool. So when the server gets the pixel data back to the JS end, let the JS side manipulate the pixel data directly to generate the image to be displayed. For multi-frame images, you can also download pixel data from the server on demand by frame.

So far, this system is based on the second way. It is important to pay special attention to the change of Hounsfield value when making window-width adjustment.

Hu[i] = pixel_val[i]*rescaleslope+ rescaleintercept. The window width is adjusted using a linear window-leveling algorithm for CT/MR and other images, or a nonlinear gamma algorithm for DX images (i.e., when the windowwidth is relatively large, the nonlinear gamma algorithm is considered, because the linear The original density of each windowwidth/255 in the algorithm is compressed into a display grayscale, the loss may be very large when the windowwidth is large)

Linear window-leveling Algorithm min = (2*windowcenter-windowwidth)/2.0-0.5;  Max = (2*windowcenter + windowwidth)/2.0-0.5;for (var i = 0; I! = Nnumpixels; i++) {Showpixelvalue = (Pixelhuvalue[i] -min) *255.0/(double) (max-min);}  The nonlinear gamma algorithm min = (2*windowcenter-windowwidth)/2.0-0.5; Max = (2*windowcenter + windowwidth)/2.0-0.5;for (var i = 0; I! = Nnumpixels; i++) {showpixelvalue = 255.0 * Math.pow (pixelhuvalue/(max-min), 1.0/gamma);}

The following code shows how the JS end generates an image from the pixel data acquired in the background. The concept of a lookup table is used.

/** * @author http://www.cnblogs.com/poxiao * Pixelbuffer represents an array of pixel information obtained from the background, and the code lists only monochrome grayscale images,  * If it's a three-color RGB image, you can change the code slightly. Limited space is not in the narrative.  **/var Pixelbuffer;//width represents the width of the image, that is, the label in Dicom (0028,0011) Columnsvar Width;//height represents the height of the image, which is the label in Dicom ( 0028,0010) Rowsvar height;/** * @windowCenter represents the current window to be displayed  * @windowWidth represents the width  * @bitsStored currently being displayed ( 0028,0101) generates a lookup table size based on the number of storage bits per pixel  * @rescaleSlope (0028,1053) is used to calculate Hu values  * @rescaleIntercept   (0028,1052) Used to calculate Hu value  * **/function createimagecanvas (windowcenter,windowwidth,bitsstored,rescaleslope,rescaleintercept) {     var lookupobject=new lookuptable ();    lookupobject.setdata (Windowcenter, windowwidth,bitsstored,rescaleslope,rescaleintercept);    lookupobject.calculatehulookup ();     lookupobject.calculatelookup ();        var imagecanvas= Document.createelement ("Canvas");    imagecanvas.width = width;    imaGecanvas.height =height;    imageCanvas.style.width = width;    ImageCanvas.style.height = height;    var tmpcxt = Imagecanvas.getcontext ("2d");    var ImageData = Tmpcxt.getimagedata (0,0,width,height);    var n=0;    for (Var yPix=0; YPix 
When the mouse adjusts the window width, the JS side generates the image + the speed of drawing the graph.
1.512 X 512 Size CT Image Adjustment window Wide window position speed
2.512 X 512 size color CT image Adjust window width window speed
3.512 x 512-size Mr Image Adjust window width window speed
4.2057 X 1347 size CR Image Adjustment window Wide window position speed
5. With the pixel information, you can get the CT value in real time on the client.
6: With the pixel information after the measurement can also be obtained to the measurement area of the maximum, minimum, variance, mean and other measurement information
Into the test, adjust the window width of the window to draw the time of the HTML5 is still very fast, the total drawing time in the order of 10 milliseconds, and found that the drawing time can also be reduced, the drawing time includes the text information on the corner of the image, but the information efficiency of HTML5 drawing text is obviously more efficient than drawing the image, So you don't have to draw text information every time you refresh, you can control the change of text information when the image is switched or the window is wide. Regarding the generation time of the image, it is found that the image generation time is proportional to the width x height of the image, the larger the image takes longer, and the image time of CT/MR is about dozens of milliseconds. For the 2057x1347 CR image time is about 400 milliseconds, for the 2000x3000 more DX image generation image time is a bit of Kaka, to 1 seconds-2 seconds or so ... This speed also need to find a way to optimize the wood has .... There are also for DX Image Adjustment window Wide window although using the gamma algorithm, but out of the image, I always feel that there is no third-party tools such as the radiant seen on the smooth, a bit loud noise. So before we get a better solution, the current DX image can only specialize in preserving the original way in the server-side directly generated JPG so that the client directly draw, I hope that the dicom image algorithm of the great God to see this article can give me a little bit about DX window width of the views, Do you want to use another algorithm or something? Thank you, first .
PACS--HTML5 image processing based on HTML5