Cornerstonewadoimageloader based on the Cornerstone.js

The previous article briefly introduced the related use of cornerstone.js and cornerstone-based Web library Cornerstonewadoimageloader, in the actual development encountered some related problems, explained here, but also to prevent the future encounter similar problems, in order to view.

For some external libraries, we do not understand every detail of implementation, so it is possible to encounter a variety of pits, through the use of Cornerstonewadoimageloader library files, I learned from the "pit" from the point of view: Try not to rely on the library to bring the variable. See Code:

  /*Assuming that you need to get the value of ImagePath in Cornerstonewadoimageloader, you may need to call this path value multiple times in your own program*//*the first possible bug to be spelled out*/ varpath1=Cornerstonewadoimageloader.imagepath, .....varPath2=Cornerstonewadoimageloader.imagepath, ..... This kind of writing bugs more often, not necessarily every time there is a bug, because it may be related to the variable context of the call, a variable call has no constraints, B variables may have some contextual constraints (of course, this situation is rare, but encountered a bug), or some other constraints. /*It's easy to avoid bugs*/varPath=cornerstonewadoimageloader.imagepath;//Define Global..varpath1=path;..varPath2=path;.. Custom variables receive Cornerstonewadoimageloader variables, which can not only avoid bugs, but also optimize some performance. I encountered this bug many times in the project, when the first writing, clearly above a line of code to call the variable successfully, in the following when using this variable will occasionally appear unable to get a variable hint. 

• Coordinate transformation

Actual requirements, not just to show dicom images, but also to do some work on the canvas

Zoom Panning Selection:

On the left is the original picture, the middle is to zoom the picture after the pan, the right is the zoom translation after the selected picture (this is a lung CT image, the red circle in the figure is a manual annotation of the Knot)

The problem with coordinate transformation is: in the third picture, the red circle is implemented simply by drawing a red dot on the canvas and then connecting it to a simple brush function. So the question is, how do you know the coordinates of the brush relative to the image when the image is scaled and panned?

What do you mean? : Please understand the third picture, assuming that the red dot coordinate in the graph is (160,320),---The red circle is made up of n points, we assume that he has a point coordinate, only one point of the coordinate conversion method, the other is the same. So no matter how the picture moves, the coordinates of this point are (160,320), he is quite canvas coordinates, (point is drawn on the canvas, the picture is also drawn on the canvas, no matter how the picture moves, the point is not moving.) Then, when the user zooms in and pans the image and finds a lesion, circle it, and now want to get the position of the red circle on the original, coordinate conversion is necessary. If you do not understand a different way of thinking, look at a picture or photo on your computer, now drag the location of the photo window, then enlarge the photo or zoom out the photo, now take the left hand finger on the display, point in the point you want to focus, do not take off, right hand use the mouse to the original position and the image to restore the size So your fingers are still in your spot? This is the coordinate transformation, our requirement is that the doctor is looking at the dicom image, manually labeling the suspicious location of the image, and then we restore the red circle through the algorithm to detect the correct doctor mark, this is the original intention of coordinate conversion

The formula is given directly:(pos.x-(imgx+ (CV1.WIDTH/2-IMG.WIDTH*SCALE/2)))/scale;

Pos.x is the x-coordinate of the point, IMGX is the mouse X-direction movement, CV1 is the canvas, IMG is the picture, scale scales, the formula gives the conversion of x, for y conversion directly to the corresponding Y value, and then width to change to height, so you can click on the point of the mouse, converted to the corresponding point in the original, said So much, not a theme ..... Just to introduce the coordinate transformation, the formula can be used for any other related operation of the development project.

To say the theme is: Cornerstone of the viewpoint of the Viewport.translation property, we can get the mouse movement in the custom canvas, in the use of Cornerstonewadoimageloader this library, it only need you to provide a div, it from It creates a canvas on this div (which is now 512) and then draws it, so that you simply cannot get the properties of the canvas, but he provides the API that can be used directly, but there is a pit.

Look at the code:

  Else   if (3 = = E.which)            {    //determine if right-               console.log (3);               LASTX = E.clientx;               Lasty = E.clienty;            $ (document). MouseMove (function (e) {                deltax = e.clientx-lastx,                deltay = e.clienty-lasty;                LASTX = E.clientx;                Lasty = E.clienty;                               Viewport = Cornerstone.getviewport (element);                Viewport.translation.x + = (deltax/viewport.scale);                VIEWPORT.TRANSLATION.Y + = (deltay/viewport.scale);                Viewport.translation.x + = DeltaX;                viewportx=viewport.translation.x;                VIEWPORT.TRANSLATION.Y + = DeltaY;                VIEWPORTY=VIEWPORT.TRANSLATION.Y;                Console.log (VIEWPORTX);                Console.log (viewporty);                Cornerstone.setviewport (element, viewport);            });

When the right mouse button is clicked, the default translation function for the picture operation.

Note that this variable is viewport.translation.x, which is the default image move property that he provides, by + = Mouse Movement amount, so that the image is shifted, note the code comments section, the beginning of my implementation method is:

Viewport.translation.x + = DeltaX, this is really the right way to operate

The steps to move an image in the canvas are: 1. Get the mouse movement 2. Calculate the starting position of the picture + mouse movement 3. Empty the canvas and then redraw the DrawImage () based on the 2 calculated position, and now the library gives the translation properties without the above complex operations ( Can not operate, can not get the canvas), directly assigned value. But according to the conventional algorithm//viewport.translation.x + = DeltaX, the picture can be moved completely, no problem, the relative position of the mouse and picture can be different:

when the mouse icon is not cut, I draw according to the position of a red arrow (two times I was the point in the picture, and then pan)

The left image uses viewport.translation.x + = (deltax/viewport.scale), you can see the position of the mouse or the picture, the relative position has not changed.

The right picture is using viewport.translation.x + = DeltaX, the mouse I started is also point in the picture on the right to drag, but the picture to the right to move more than the amount of mouse movement, resulting in the phenomenon in the picture, pictures go much. At this time, the image of the movement, is not the mouse movement, coordinate conversion of the IMGX mouse movement of the corresponding is not the distance of the picture movement, first step, and then back to the question of the mobile volume [email protected].

By using viewport.translation.x + = (deltax/viewport.scale), then the corresponding coordinate conversion formula:

(Pos.x-(Viewportx*viewport_scale+ (CV1.WIDTH/2-IMG.WIDTH*VIEWPORT_SCALE/2)))/viewport_scale

In the formula viewportx=viewport.translation.x, I have customized the variable assignment, which is mentioned above, I directly use the viewport.translation.x here, the error, unable to obtain, and then I used the other variable to accept a bit. That's not the point.

Viewportx*viewport_scale, this is the point.

In the above,/scale, the following formula is *scale, not unchanged?

Because, the original formula is no *scale, the conversion formula here is just IMGX

Explanation: The general idea of the formula is: the mouse drag the picture to the right to move 50px, then I mark the red circle at this time, then if you want to get the red circle relative to the original position, my red circle to the left -50px, just right, is this idea, but, here the mouse movement is equal to the image of the movement, This is the problem of @1, for its API, no/scale words, the mouse movement distance is not the distance of the picture movement, less than the distance of the picture movement (depending on scale), that is, the mouse moved to the right 50px, the actual picture moved 60px, So you're -50px with the dots in the red circle, and you don't get the actual picture position.

All these are/scale reasons, as for why/scale, rather than/scale*2, rather than/scale*3? This depends on how the translation API is defined, and I am finding the answer in his official example, so here/scale, in the following multiply scale, make sure the formula defines the amount of mouse movement.

Make sure the picture and mouse move synchronously before using the formula.

Said a lot, wrote 1 hours, I found writing essays, can write while combing the thinking at the time.

One more thing: you need to configure both script paths when you use them, as follows. Google Translate, probably understand the meaning of the line

The Web worker framework requires some configuration because the Web worker needs the path to the source file. because the cornerstone does not perform the contract for the source file location, you must tell the underlying web worker framework where the Web worker file is loaded correctly. This is done through the cornerstoneWADOImageLoader.webWorkerManager.initialize () function. You must call this function before you can start a Web work task (or use the cornerstone load image) so that the Web worker code loads correctly.

Minimum Configuration

The following is an example of a minimal configuration object.

   VarConfig= {Webworkerpath：' .. /.. / Dist   /   cornerstonewadoimageloaderwebworker.js   ' ,    taskconfiguration {    '     Decodetask      '   :  {  Codecspath     '   . /  Dist   /   Cornerstonewadoimageloadercodecs.js    '           }   }  };  cornerstonewadoimageloader .  webworkermanager .  initialize  (config);          

in the example above, you will see two paths, one to Cornerstonewadoimageloaderwebworker.js, and one to the Cornerstonewadoimageloadercodecs.js file. All two files can be found in the Repository's Dist folder. You must host these two files on your Web server and provide a path.

Cornerstonewadoimageloader based on the Cornerstone.js