Added changeImageIdCacheSize() function to imageCache to support chan…

…ging the size of an imageId in the cache Added support for an optional decache function on the image object which is called when that image is removed from the cache. Added support for an optional sharedCacheKey string on the image object which is used by the imageCache to properly handle multi-frame images (or other possible cases where multiple imageId's are managed in one memory block) Fixed bug where ww/wc was not applied to color images if the current ww/wc matched the default in the image object Fixed bug where color images were assumed to have a getCanvas() function on the image object
joedaniels29 · Feb 3, 2016 · 17b4b2b · 17b4b2b
1 parent 31556ce
commit 17b4b2b
Show file tree

Hide file tree

Showing 10 changed files with 196 additions and 76 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
     "name": "cornerstone",
-    "version": "0.8.4",
+    "version": "0.9.0",
     "description": "HTML5 Medical Image Viewer Component",
     "main" : "dist/cornerstone.js",
     "ignore": [

diff --git a/dist/cornerstone.css b/dist/cornerstone.css
@@ -1,4 +1,4 @@
-/*! cornerstone - v0.8.4 - 2015-09-12 | (c) 2014 Chris Hafey | https://github.com/chafey/cornerstone */
+/*! cornerstone - v0.9.0 - 2016-02-03 | (c) 2014 Chris Hafey | https://github.com/chafey/cornerstone */
 .cornerstone-enabled-image {
 
     /* prevent text selection from occurring when dragging the mouse on the div */

diff --git a/dist/cornerstone.js b/dist/cornerstone.js
@@ -1,4 +1,4 @@
-/*! cornerstone - v0.8.4 - 2015-09-12 | (c) 2014 Chris Hafey | https://github.com/chafey/cornerstone */
+/*! cornerstone - v0.9.0 - 2016-02-03 | (c) 2014 Chris Hafey | https://github.com/chafey/cornerstone */
 if(typeof cornerstone === 'undefined'){
     cornerstone = {
         internal : {},
@@ -468,8 +468,11 @@ if(typeof cornerstone === 'undefined'){
 
     "use strict";
 
+    // dictionary of imageId to cachedImage objects
     var imageCache = {};
-
+    // dictionary of sharedCacheKeys to number of imageId's in cache with this shared cache key
+    var sharedCacheKeys = {};
+    // array of cachedImage objects
     var cachedImages = [];
 
     var maximumSizeInBytes = 1024 * 1024 * 1024; // 1 GB
@@ -535,6 +538,7 @@ if(typeof cornerstone === 'undefined'){
         var cachedImage = {
             loaded : false,
             imageId : imageId,
+            sharedCacheKey: undefined, // the sharedCacheKey for this imageId.  undefined by default
             imagePromise : imagePromise,
             timeStamp : new Date(),
             sizeInBytes: 0
@@ -552,8 +556,23 @@ if(typeof cornerstone === 'undefined'){
             if (image.sizeInBytes.toFixed === undefined) {
                 throw "putImagePromise: image.sizeInBytes is not a number";
             }
-            cachedImage.sizeInBytes = image.sizeInBytes;
-            cacheSizeInBytes += cachedImage.sizeInBytes;
+
+            // If this image has a shared cache key, reference count it and only
+            // count the image size for the first one added with this sharedCacheKey
+            if(image.sharedCacheKey) {
+              cachedImage.sizeInBytes = image.sizeInBytes;
+              cachedImage.sharedCacheKey = image.sharedCacheKey;
+              if(sharedCacheKeys[image.sharedCacheKey]) {
+                sharedCacheKeys[image.sharedCacheKey]++;
+              } else {
+                sharedCacheKeys[image.sharedCacheKey] = 1;
+                cacheSizeInBytes += cachedImage.sizeInBytes;
+              }
+            }
+            else {
+              cachedImage.sizeInBytes = image.sizeInBytes;
+              cacheSizeInBytes += cachedImage.sizeInBytes;
+            }
             purgeCacheIfNecessary();
         });
     }
@@ -581,9 +600,23 @@ if(typeof cornerstone === 'undefined'){
             throw "removeImagePromise: imageId must not be undefined";
         }
         cachedImages.splice( cachedImages.indexOf(cachedImage), 1);
-        cacheSizeInBytes -= cachedImage.sizeInBytes;
+
+        // If this is using a sharedCacheKey, decrement the cache size only
+        // if it is the last imageId in the cache with this sharedCacheKey
+        if(cachedImages.sharedCacheKey) {
+          if(sharedCacheKeys[cachedImages.sharedCacheKey] === 1) {
+            cacheSizeInBytes -= cachedImage.sizeInBytes;
+            delete sharedCacheKeys[cachedImages.sharedCacheKey];
+          } else {
+            sharedCacheKeys[cachedImages.sharedCacheKey]--;
+          }
+        } else {
+          cacheSizeInBytes -= cachedImage.sizeInBytes;
+        }
         delete imageCache[imageId];
 
+        decache(cachedImage.imagePromise, cachedImage.imageId);
+
         return cachedImage.imagePromise;
     }
 
@@ -595,15 +628,37 @@ if(typeof cornerstone === 'undefined'){
         };
     }
 
+    function decache(imagePromise, imageId) {
+      imagePromise.then(function(image) {
+        if(image.decache) {
+          image.decache();
+        }
+        imagePromise.reject();
+        delete imageCache[imageId];
+      }).always(function() {
+        delete imageCache[imageId];
+      });
+    }
+
     function purgeCache() {
         while (cachedImages.length > 0) {
-            var removedCachedImage = cachedImages.pop();
-            delete imageCache[removedCachedImage.imageId];
-            removedCachedImage.imagePromise.reject();
+          var removedCachedImage = cachedImages.pop();
+          decache(removedCachedImage.imagePromise, removedCachedImage.imageId);
         }
         cacheSizeInBytes = 0;
     }
 
+    function changeImageIdCacheSize(imageId, newCacheSize) {
+      var cacheEntry = imageCache[imageId];
+      if(cacheEntry) {
+        cacheEntry.imagePromise.then(function(image) {
+          var cacheSizeDifference = newCacheSize - image.sizeInBytes;
+          image.sizeInBytes = newCacheSize;
+          cacheSizeInBytes += cacheSizeDifference;
+        });
+      }
+    }
+
     // module exports
     cornerstone.imageCache = {
         putImagePromise : putImagePromise,
@@ -612,7 +667,8 @@ if(typeof cornerstone === 'undefined'){
         setMaximumSizeBytes: setMaximumSizeBytes,
         getCacheInfo : getCacheInfo,
         purgeCache: purgeCache,
-        cachedImages: cachedImages
+        cachedImages: cachedImages,
+        changeImageIdCacheSize: changeImageIdCacheSize
     };
 
 }(cornerstone));
@@ -1504,38 +1560,39 @@ if(typeof cornerstone === 'undefined'){
 
     function getRenderCanvas(enabledElement, image, invalidated)
     {
-        // apply the lut to the stored pixel data onto the render canvas
 
-        if(enabledElement.viewport.voi.windowWidth === enabledElement.image.windowWidth &&
-            enabledElement.viewport.voi.windowCenter === enabledElement.image.windowCenter &&
-            enabledElement.viewport.invert === false)
+        // The ww/wc is identity and not inverted - get a canvas with the image rendered into it for
+        // fast drawing
+        if(enabledElement.viewport.voi.windowWidth === 255 &&
+            enabledElement.viewport.voi.windowCenter === 128 &&
+            enabledElement.viewport.invert === false &&
+            image.getCanvas &&
+            image.getCanvas()
+        )
         {
-            // the color image voi/invert has not been modified, request the canvas that contains
-            // it so we can draw it directly to the display canvas
             return image.getCanvas();
         }
-        else
-        {
-            if(doesImageNeedToBeRendered(enabledElement, image) === false && invalidated !== true) {
-                return colorRenderCanvas;
-            }
-
-            // If our render canvas does not match the size of this image reset it
-            // NOTE: This might be inefficient if we are updating multiple images of different
-            // sizes frequently.
-            if(colorRenderCanvas.width !== image.width || colorRenderCanvas.height != image.height) {
-                initializeColorRenderCanvas(image);
-            }
 
-            // get the lut to use
-            var colorLut = getLut(image, enabledElement.viewport);
-
-            // the color image voi/invert has been modified - apply the lut to the underlying
-            // pixel data and put it into the renderCanvas
-            cornerstone.storedColorPixelDataToCanvasImageData(image, colorLut, colorRenderCanvasData.data);
-            colorRenderCanvasContext.putImageData(colorRenderCanvasData, 0, 0);
+        // apply the lut to the stored pixel data onto the render canvas
+        if(doesImageNeedToBeRendered(enabledElement, image) === false && invalidated !== true) {
             return colorRenderCanvas;
         }
+
+        // If our render canvas does not match the size of this image reset it
+        // NOTE: This might be inefficient if we are updating multiple images of different
+        // sizes frequently.
+        if(colorRenderCanvas.width !== image.width || colorRenderCanvas.height != image.height) {
+            initializeColorRenderCanvas(image);
+        }
+
+        // get the lut to use
+        var colorLut = getLut(image, enabledElement.viewport);
+
+        // the color image voi/invert has been modified - apply the lut to the underlying
+        // pixel data and put it into the renderCanvas
+        cornerstone.storedColorPixelDataToCanvasImageData(image, colorLut, colorRenderCanvasData.data);
+        colorRenderCanvasContext.putImageData(colorRenderCanvasData, 0, 0);
+        return colorRenderCanvas;
     }
 
     /**

diff --git a/dist/cornerstone.min.css b/dist/cornerstone.min.css
diff --git a/dist/cornerstone.min.js b/dist/cornerstone.min.js
diff --git a/example/colorImage/index.html b/example/colorImage/index.html
@@ -103,8 +103,8 @@ <h1>
                 maxPixelValue: 255,
                 slope: 1.0,
                 intercept: 0,
-                windowCenter: 127,
-                windowWidth: 256,
+                windowCenter: 128,
+                windowWidth: 255,
                 render: cornerstone.renderColorImage,
                 getPixelData: getPixelData,
                 getImageData: getImageData,

diff --git a/example/imageCache/index.html b/example/imageCache/index.html
@@ -20,6 +20,7 @@ <h1>
 
     <button id="purge" class="btn">Purge Cache</button>
     <button id="addImage" class="btn">Add Image</button>
+    <button id="changeImageSize" class="btn">Change Image Size</button>
 
     <div style="width:512px;height:512px;position:relative;color: white;"
          class="cornerstone-enabled-image"
@@ -85,6 +86,11 @@ <h1>
             cornerstone.loadAndCacheImage(imageId);
         });
 
+        $('#changeImageSize').click(function() {
+            var imageId = "colorImageLoader://1";
+            cornerstone.imageCache.changeImageIdCacheSize(imageId, 512 * 1024);
+        });
+
         setInterval(function() {
             var cacheInfo = cornerstone.imageCache.getCacheInfo();
             //$('#maxCacheSize').val("" + cacheInfo.maximumSizeInBytes);

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cornerstone",
-  "version": "0.8.4",
+  "version": "0.9.0",
   "description": "HTML5 Medical Image Viewer Component",
   "keywords": [
         "DICOM",

diff --git a/src/imageCache.js b/src/imageCache.js
@@ -6,8 +6,11 @@
 
     "use strict";
 
+    // dictionary of imageId to cachedImage objects
     var imageCache = {};
-
+    // dictionary of sharedCacheKeys to number of imageId's in cache with this shared cache key
+    var sharedCacheKeys = {};
+    // array of cachedImage objects
     var cachedImages = [];
 
     var maximumSizeInBytes = 1024 * 1024 * 1024; // 1 GB
@@ -73,6 +76,7 @@
         var cachedImage = {
             loaded : false,
             imageId : imageId,
+            sharedCacheKey: undefined, // the sharedCacheKey for this imageId.  undefined by default
             imagePromise : imagePromise,
             timeStamp : new Date(),
             sizeInBytes: 0
@@ -90,8 +94,23 @@
             if (image.sizeInBytes.toFixed === undefined) {
                 throw "putImagePromise: image.sizeInBytes is not a number";
             }
-            cachedImage.sizeInBytes = image.sizeInBytes;
-            cacheSizeInBytes += cachedImage.sizeInBytes;
+
+            // If this image has a shared cache key, reference count it and only
+            // count the image size for the first one added with this sharedCacheKey
+            if(image.sharedCacheKey) {
+              cachedImage.sizeInBytes = image.sizeInBytes;
+              cachedImage.sharedCacheKey = image.sharedCacheKey;
+              if(sharedCacheKeys[image.sharedCacheKey]) {
+                sharedCacheKeys[image.sharedCacheKey]++;
+              } else {
+                sharedCacheKeys[image.sharedCacheKey] = 1;
+                cacheSizeInBytes += cachedImage.sizeInBytes;
+              }
+            }
+            else {
+              cachedImage.sizeInBytes = image.sizeInBytes;
+              cacheSizeInBytes += cachedImage.sizeInBytes;
+            }
             purgeCacheIfNecessary();
         });
     }
@@ -119,9 +138,23 @@
             throw "removeImagePromise: imageId must not be undefined";
         }
         cachedImages.splice( cachedImages.indexOf(cachedImage), 1);
-        cacheSizeInBytes -= cachedImage.sizeInBytes;
+
+        // If this is using a sharedCacheKey, decrement the cache size only
+        // if it is the last imageId in the cache with this sharedCacheKey
+        if(cachedImages.sharedCacheKey) {
+          if(sharedCacheKeys[cachedImages.sharedCacheKey] === 1) {
+            cacheSizeInBytes -= cachedImage.sizeInBytes;
+            delete sharedCacheKeys[cachedImages.sharedCacheKey];
+          } else {
+            sharedCacheKeys[cachedImages.sharedCacheKey]--;
+          }
+        } else {
+          cacheSizeInBytes -= cachedImage.sizeInBytes;
+        }
         delete imageCache[imageId];
 
+        decache(cachedImage.imagePromise, cachedImage.imageId);
+
         return cachedImage.imagePromise;
     }
 
@@ -133,15 +166,37 @@
         };
     }
 
+    function decache(imagePromise, imageId) {
+      imagePromise.then(function(image) {
+        if(image.decache) {
+          image.decache();
+        }
+        imagePromise.reject();
+        delete imageCache[imageId];
+      }).always(function() {
+        delete imageCache[imageId];
+      });
+    }
+
     function purgeCache() {
         while (cachedImages.length > 0) {
-            var removedCachedImage = cachedImages.pop();
-            delete imageCache[removedCachedImage.imageId];
-            removedCachedImage.imagePromise.reject();
+          var removedCachedImage = cachedImages.pop();
+          decache(removedCachedImage.imagePromise, removedCachedImage.imageId);
         }
         cacheSizeInBytes = 0;
     }
 
+    function changeImageIdCacheSize(imageId, newCacheSize) {
+      var cacheEntry = imageCache[imageId];
+      if(cacheEntry) {
+        cacheEntry.imagePromise.then(function(image) {
+          var cacheSizeDifference = newCacheSize - image.sizeInBytes;
+          image.sizeInBytes = newCacheSize;
+          cacheSizeInBytes += cacheSizeDifference;
+        });
+      }
+    }
+
     // module exports
     cornerstone.imageCache = {
         putImagePromise : putImagePromise,
@@ -150,7 +205,8 @@
         setMaximumSizeBytes: setMaximumSizeBytes,
         getCacheInfo : getCacheInfo,
         purgeCache: purgeCache,
-        cachedImages: cachedImages
+        cachedImages: cachedImages,
+        changeImageIdCacheSize: changeImageIdCacheSize
     };
 
 }(cornerstone));