fix(thumbnails): Prevent caching for thumbnail images by using canvas…

… element (thanks @jasonklotzer)
OHIF · Dec 19, 2018 · e508a59 · e508a59
1 parent 7643a38
commit e508a59
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 15 deletions.
diff --git a/Packages/ohif-viewerbase/client/components/studyBrowser/imageThumbnail/imageThumbnail.html b/Packages/ohif-viewerbase/client/components/studyBrowser/imageThumbnail/imageThumbnail.html
@@ -1,7 +1,7 @@
 <template name="imageThumbnail">
     <div class="imageThumbnail">
         <div class="imageThumbnailCanvas">
-            <img class="static-image"/>
+            <canvas class="static-image"></canvas>
         </div>
         <div class="imageThumbnailLoadingIndicator
                     thumbnailLoadingIndicator

diff --git a/Packages/ohif-viewerbase/client/components/studyBrowser/imageThumbnail/imageThumbnail.js b/Packages/ohif-viewerbase/client/components/studyBrowser/imageThumbnail/imageThumbnail.js
@@ -57,28 +57,20 @@ Template.imageThumbnail.onRendered(() => {
     const $thumbnailElement = $parent.find('.imageThumbnailCanvas');
 
     instance.refreshImage = () => {
-        const imageElement = $thumbnailElement.find('img').get(0);
+        const staticImageCanvasElement = $thumbnailElement.find('canvas').get(0);
 
         // Activate the loading state
         instance.isLoading.set(true);
         instance.hasLoadingError.set(false);
 
-        // Clear the previous image
-        imageElement.removeAttribute('src');
-
         // Define a handler for success on image load
         const loadSuccess = image => {
-            // This is an off-screen canvas. It's used to get dataURL images by using
-            // cornerstone.renderToCanvas function.
-            const canvasElement = document.createElement('canvas');
-            canvasElement.width = 193;
-            canvasElement.height = 123;
-
-            // Render the image to canvas to be able to get its dataURL
-            renderAsync(canvasElement, image).then(() => {
-              instance.isLoading.set(false);
+            staticImageCanvasElement.width = 193;
+            staticImageCanvasElement.height = 123;
 
-              imageElement.src = canvasElement.toDataURL('image/jpeg', 1);
+            // Render the image to the static image canvas
+            renderAsync(staticImageCanvasElement, image).then(() => {
+                instance.isLoading.set(false);
             });
         };