Added support for properly displaying images with non square pixels

Added example showing non square pixel display
WooodHead · Apr 13, 2014 · 8ffec14 · 8ffec14
1 parent 7242603
commit 8ffec14
Show file tree

Hide file tree

Showing 10 changed files with 121 additions and 14 deletions.
diff --git a/dist/cornerstone.js b/dist/cornerstone.js
@@ -159,7 +159,7 @@ var cornerstone = (function (cornerstone) {
         }
 
         // Draw the render canvas half the image size (because we set origin to the middle of the canvas above)
-        context.drawImage(renderCanvas, 0,0, image.columns, image.rows, 0, 0, image.columns, image.rows);
+        context.drawImage(renderCanvas, 0,0, image.width, image.height, 0, 0, image.width, image.height);
 
         context.restore();
 
@@ -583,8 +583,19 @@ var cornerstone = (function (cornerstone) {
 
         // scale to image coordinates middleX/middleY
         var viewport = ee.viewport;
-        var scaledMiddleX = middleX / viewport.scale;
-        var scaledMiddleY = middleY / viewport.scale;
+
+        // apply the scale
+        var widthScale = ee.viewport.scale;
+        var heightScale = ee.viewport.scale;
+        if(ee.image.rowPixelSpacing < ee.image.columnPixelSpacing) {
+            widthScale = widthScale * (ee.image.columnPixelSpacing / ee.image.rowPixelSpacing);
+        }
+        else if(ee.image.columnPixelSpacing < ee.image.rowPixelSpacing) {
+            heightScale = heightScale * (ee.image.rowPixelSpacing / ee.image.columnPixelSpacing);
+        }
+
+        var scaledMiddleX = middleX / widthScale;
+        var scaledMiddleY = middleY / heightScale;
 
         // apply pan offset
         var imageX = scaledMiddleX - viewport.centerX;
@@ -678,7 +689,15 @@ var cornerstone = (function (cornerstone) {
         // move origin to center of canvas
         context.translate(ee.canvas.width/2, ee.canvas.height / 2);
         // apply the scale
-        context.scale(ee.viewport.scale, ee.viewport.scale);
+        var widthScale = ee.viewport.scale;
+        var heightScale = ee.viewport.scale;
+        if(ee.image.rowPixelSpacing < ee.image.columnPixelSpacing) {
+            widthScale = widthScale * (ee.image.columnPixelSpacing / ee.image.rowPixelSpacing);
+        }
+        else if(ee.image.columnPixelSpacing < ee.image.rowPixelSpacing) {
+            heightScale = heightScale * (ee.image.rowPixelSpacing / ee.image.columnPixelSpacing);
+        }
+
         // apply the pan offset
         context.translate(ee.viewport.centerX, ee.viewport.centerY);
 
@@ -731,12 +750,21 @@ var cornerstone = (function (cornerstone) {
         context.setTransform(1, 0, 0, 1, 0, 0);
         // move origin to center of canvas
         context.translate(ee.canvas.width/2, ee.canvas.height / 2);
+
         // apply the scale
-        context.scale(ee.viewport.scale, ee.viewport.scale);
+        var widthScale = ee.viewport.scale;
+        var heightScale = ee.viewport.scale;
+        if(ee.image.rowPixelSpacing < ee.image.columnPixelSpacing) {
+            widthScale = widthScale * (ee.image.columnPixelSpacing / ee.image.rowPixelSpacing);
+        }
+        else if(ee.image.columnPixelSpacing < ee.image.rowPixelSpacing) {
+            heightScale = heightScale * (ee.image.rowPixelSpacing / ee.image.columnPixelSpacing);
+        }
+        context.scale(widthScale, heightScale);
         // apply the pan offset
         context.translate(ee.viewport.centerX, ee.viewport.centerY);
         // translate the origin back to the corner of the image so the event handlers can draw in image coordinate system
-        context.translate(-ee.image.columns /2, -ee.image.rows/2);
+        context.translate(-ee.image.width /2, -ee.image.height/2);
     }
 
     // Module exports
@@ -794,6 +822,7 @@ var cornerstone = (function (cornerstone) {
                             }
                         }
                     }
+
                     cornerstone.updateImage(element);
 
                     // fire an event indicating the viewport has been changed

diff --git a/dist/cornerstone.min.js b/dist/cornerstone.min.js
diff --git a/docs/roadmap.md b/docs/roadmap.md
@@ -11,13 +11,13 @@ Phase 4 (in progress)
  * Example for interpolation on/off (DONE)
  * Consider moving the markup functionality to another library (DONE - Deleted for now)
  * Add support for resizing the enabled image (DONE)
+ * Rendering of images with non square pixels (rowPixelSpacing != columnPixelSpacing) (DONE)
  * Code cleanup / refactoring / documentation
  * Consider moving setToFontCoordinateSystem and setToPixelCoordinateSystem to tools library?
    * might be best to consolidate them into one function and provide an optional fontScale
      parameter to trigger font scaling?
  * Packaging/build related
      * packaged as a bower module
- * Rendering of non square pixels (pixel spacing is not the same vertically and horizontally)
 
 Phase 3 (completed April 11, 2014)
 ---------------------

diff --git a/example/index.html b/example/index.html
@@ -29,6 +29,7 @@ <h1>
         <li><a href="imageloader/index.html">Custom ImageLoader</a></li>
         <li><a href="multiimage/index.html">Display two mri images and one ct image on the same page</a></li>
         <li><a href="ctimage/index.html">CT Image</a></li>
+        <li><a href="nonSquarePixels/index.html">Non square pixels</a></li>
         <li><a href="scrollzoompanwl/index.html">All features (scroll, zoom, pan, window/level, html overlays, resize, invert, interpolation)</a></li>
     </ul>
 

diff --git a/example/nonSquarePixels/index.html b/example/nonSquarePixels/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <!-- twitter bootstrap CSS stylesheet - not required by cornerstone -->
+    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
+</head>
+<body>
+<div class="container">
+
+    <h1>
+        nonSquarePixels/index.html
+    </h1>
+
+    This is an example of displaying an image with non square pixels.  For this example
+    we are changing the rowPixelSpacing for an image with square pixels so it is half what
+    it should be.  This should result in a squished image
+    <br>
+    <br>
+
+    <div id="dicomImage" style="width:512px;height:512px;">
+    </div>
+
+</div>
+</body>
+<!-- include the cornerstone library -->
+<script src="../../dist/cornerstone.js"></script>
+
+<!-- jquery - included to make things easier to demo, not needed or used by the cornerstone library but
+is used by our example image loader-->
+<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
+
+<!-- include special code for these examples which provides images -->
+<script src="../exampleImageIdLoader.js"></script>
+
+<script>
+    var imageId = 'example://1';
+    var element = document.getElementById('dicomImage');
+    var viewportOptions = {
+      scale: 1.0
+    };
+    cornerstone.enable(element, imageId, viewportOptions);
+    var imageDeferred = cornerstone.loadImage(imageId);
+    imageDeferred.done(function(image) {
+        image.rowPixelSpacing = image.rowPixelSpacing / 2.0;
+        cornerstone.updateImage(element);
+    });
+</script>
+</html>
diff --git a/src/drawImage.js b/src/drawImage.js
@@ -118,7 +118,7 @@ var cornerstone = (function (cornerstone) {
         }
 
         // Draw the render canvas half the image size (because we set origin to the middle of the canvas above)
-        context.drawImage(renderCanvas, 0,0, image.columns, image.rows, 0, 0, image.columns, image.rows);
+        context.drawImage(renderCanvas, 0,0, image.width, image.height, 0, 0, image.width, image.height);
 
         context.restore();
 

diff --git a/src/pageToPixel.js b/src/pageToPixel.js
@@ -39,8 +39,19 @@ var cornerstone = (function (cornerstone) {
 
         // scale to image coordinates middleX/middleY
         var viewport = ee.viewport;
-        var scaledMiddleX = middleX / viewport.scale;
-        var scaledMiddleY = middleY / viewport.scale;
+
+        // apply the scale
+        var widthScale = ee.viewport.scale;
+        var heightScale = ee.viewport.scale;
+        if(ee.image.rowPixelSpacing < ee.image.columnPixelSpacing) {
+            widthScale = widthScale * (ee.image.columnPixelSpacing / ee.image.rowPixelSpacing);
+        }
+        else if(ee.image.columnPixelSpacing < ee.image.rowPixelSpacing) {
+            heightScale = heightScale * (ee.image.rowPixelSpacing / ee.image.columnPixelSpacing);
+        }
+
+        var scaledMiddleX = middleX / widthScale;
+        var scaledMiddleY = middleY / heightScale;
 
         // apply pan offset
         var imageX = scaledMiddleX - viewport.centerX;

diff --git a/src/setToFontCoordinateSystem.js b/src/setToFontCoordinateSystem.js
@@ -29,7 +29,15 @@ var cornerstone = (function (cornerstone) {
         // move origin to center of canvas
         context.translate(ee.canvas.width/2, ee.canvas.height / 2);
         // apply the scale
-        context.scale(ee.viewport.scale, ee.viewport.scale);
+        var widthScale = ee.viewport.scale;
+        var heightScale = ee.viewport.scale;
+        if(ee.image.rowPixelSpacing < ee.image.columnPixelSpacing) {
+            widthScale = widthScale * (ee.image.columnPixelSpacing / ee.image.rowPixelSpacing);
+        }
+        else if(ee.image.columnPixelSpacing < ee.image.rowPixelSpacing) {
+            heightScale = heightScale * (ee.image.rowPixelSpacing / ee.image.columnPixelSpacing);
+        }
+
         // apply the pan offset
         context.translate(ee.viewport.centerX, ee.viewport.centerY);
 

diff --git a/src/setToPixelCoordinateSystem.js b/src/setToPixelCoordinateSystem.js
@@ -23,12 +23,21 @@ var cornerstone = (function (cornerstone) {
         context.setTransform(1, 0, 0, 1, 0, 0);
         // move origin to center of canvas
         context.translate(ee.canvas.width/2, ee.canvas.height / 2);
+
         // apply the scale
-        context.scale(ee.viewport.scale, ee.viewport.scale);
+        var widthScale = ee.viewport.scale;
+        var heightScale = ee.viewport.scale;
+        if(ee.image.rowPixelSpacing < ee.image.columnPixelSpacing) {
+            widthScale = widthScale * (ee.image.columnPixelSpacing / ee.image.rowPixelSpacing);
+        }
+        else if(ee.image.columnPixelSpacing < ee.image.rowPixelSpacing) {
+            heightScale = heightScale * (ee.image.rowPixelSpacing / ee.image.columnPixelSpacing);
+        }
+        context.scale(widthScale, heightScale);
         // apply the pan offset
         context.translate(ee.viewport.centerX, ee.viewport.centerY);
         // translate the origin back to the corner of the image so the event handlers can draw in image coordinate system
-        context.translate(-ee.image.columns /2, -ee.image.rows/2);
+        context.translate(-ee.image.width /2, -ee.image.height/2);
     }
 
     // Module exports

diff --git a/src/showImage.js b/src/showImage.js
@@ -48,6 +48,7 @@ var cornerstone = (function (cornerstone) {
                             }
                         }
                     }
+
                     cornerstone.updateImage(element);
 
                     // fire an event indicating the viewport has been changed
-Original file line number
+Diff line change
@@ Expand Up / @@ -48,6 +48,7 @@ var cornerstone = (function (cornerstone) { @@
                                 }
                             }
                         }
                         cornerstone.updateImage(element);
                         // fire an event indicating the viewport has been changed
@@ Expand Down @@