PACS--HTML5 image processing based on HTML5

Prior to this, the system was a JPG image that was returned through JavaScript operations in the browser, in conjunction with the Dicom Wado standard. This kind of server-side parsing, client presentation, 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. When obtaining the CT value (calcification value) information on the image, it is very frequent to interact with the server.

2. Adjust the window width of the image or reverse the color of the image, but also with the server for frequent interaction.

3. The measurement of the image (rectangular measurement, ellipse measurement, etc.) can only get the simple information of the face value and the circumference, which is not very useful for the doctor's diagnosis, so it is necessary to know the measurement information of the maximum, minimum, variance and mean value of the measured region.

The above disadvantages boil down to one point: that is, there is no operation to process pixel information locally. However, the HTML5 has been well supported for pixel level processing, which can realize the operation of pixel information by clients. so in order to solve the above problems, the system has done a relatively large upgrade. The client side directly operates the dicom pixel data to generate the JS-end image and the JS-end to realize the adjustment of window-width.

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

A: Server-side directly to the byte stream to return dicom file, the client uses JS to receive the byte stream, and is responsible for parsing the image data in dicom, 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 so on to determine the structure of pixel data, and complex points may also be used to find tables ((0028,0004) photometric The value of the interpretation equals ==palette COLOR). For uncompressed display VR or Stealth VR, (0028,0004) photometric interpretation equal to MONOCHROME1 or MONOCHROME2 it is really convenient to parse out pixel data, but dicom files are various , it's really hard to write a JS file that includes a transmission syntax and a variety of pixel structures. Also take into account the multiple-frame dynamic image, if a large number of needle images of the entire file download down to resolve the estimated browser will be completely burst. So I don't think this is a very practical way. (although this process achieved the display of the VR of the Dicom file JS parsing, but the halfway into consideration of complexity and difficulty or give up).

B: To get the pixel array of dicom files from the server side, now that PACs based on C/s mode is quite mature, all kinds of third-party open source dicom parsing tools such as dcmtk,dcm4che,mdcm,opendicom are also quite many, It is also convenient to obtain the pixel data with the open Source Dicom parsing tool. So in the server to get the pixel data back to the JS end, so that the JS-side directly manipulate the pixel data to generate the image to be displayed. For multiple-frame images, you can also download pixel data from the server on demand by frame.

Now, this system is based on the second way. Need to pay special attention is: Do window wide window to adjust the time to do first Hounsfield value conversion.

Hu[i] = pixel_val[i]*rescaleslope+ rescaleintercept. The Adjustment of Window Wide window position uses the linear window-leveling algorithm for CT/MR images, or the non-linear gamma algorithm for DX images (that is, when the windowwidth is larger, consider the Non-linear gamma algorithm, 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.

The 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); 
//Non-linear 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 to use the background to obtain the pixel data to generate images. It uses the concept of lookup tables.

/**  * @author Http://www.cnblogs.com/poxiao  * Pixelbuffer represents an array of pixel information obtained from the background, and the code lists only the case of monochrome grayscale images,  * If it is a three-color RGB image of their own slightly changed the code can be.
Limited space is not a narrative.
 **/var Pixelbuffer;
Width represents the breadth of the image, that is, the label in Dicom (0028,0011) Columns var width;
Height represents the altitude of the image, that is, the label in Dicom (0028,0010) Rows var height; /**  * @windowCenter represents the currently displayed window  * @windowWidth represents the window width currently being displayed  * @bitsStored (0028,0101) Generate lookup table size based on the number of bits per pixel nbsp;* @rescaleSlope (0028,1053) is used to calculate the Hu value  * @rescaleIntercept   (0028,1052) for the 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 
The mouse adjusts the Window wide window position when the JS side produces the image + draws the graph the speed.
 
1.512 X 512 Size CT Image Adjustment window width window position speed
 
 
2.512 X 512 size color CT image Adjustment window width window position speed
 
 
3.512 x 512 size of Mr Image adjusting window width window bit speed
 
 
4.2057 X 1347 size CR Image Adjustment window width window bit speed
 
 
5. With the pixel information can be real-time in the client to obtain the CT value.
 
 
6: After the pixel information measurement can also be obtained to the measurement area of the maximum, minimum, variance, mean value and other measurement information.
 
 
In the test, the time to draw the graphics on the HTML5 when adjusting the window width is still very fast, the total drawing time in the order of magnitude of 10 milliseconds, and found that the drawing time can be reduced, this drawing time includes text information on the corner of the image, but the HTML5 to draw the text of the information efficiency is significantly more efficient than the rendering of the image of the bottom, Therefore, it is not necessary to draw the text information every time, the parameter can be controlled in the image switching or the Window Wide window, when the text information changes to draw text information. Regarding the generation time of the image, it is found that the time of image generation is directly proportional to the width and height of the image, the longer the image is, the more time it takes for the image to CT/MR, and the time is about dozens of milliseconds. For 2057x1347 CR image time is approximately 400 milliseconds, for 2000x3000 many DX image generation time is a bit of a card, to 1 seconds-2 seconds ... This speed also has to find ways to optimize the wood has ... And for the DX Image Adjustment window Wide window bit using gamma algorithm, but out of the image, I always feel no use of third-party tools such as radiant see the smooth, noisy a bit large. So before we get a better solution, the current DX image can only be specialized, that is, the original way to generate JPG directly on the server side directly to the client to draw, I hope the dicom image algorithm of the great God to see this article can give me a little bit about the DX window wide window-level views, Is there another algorithm to use? Thanks for the first .