TrizTech/ohif-viewer
15
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(thumbnails): Prevent caching for thumbnail images by using canvas element (thanks @jasonklotzer)

Browse Source
This commit is contained in:
Evren Ozkan 2018-12-19 10:29:45 -05:00
parent 7643a384b4
commit e508a59ee3
2 changed files with 7 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Packages/ohif-viewerbase/client/components/studyBrowser/imageThumbnail/imageThumbnail.html
View File

@ -1,7 +1,7 @@
<template name="imageThumbnail"> <template name="imageThumbnail">
<div class="imageThumbnail"> <div class="imageThumbnail">
<div class="imageThumbnailCanvas"> <div class="imageThumbnailCanvas">
<img class="static-image"/> <canvas class="static-image"></canvas>
</div> </div>
<div class="imageThumbnailLoadingIndicator <div class="imageThumbnailLoadingIndicator
thumbnailLoadingIndicator thumbnailLoadingIndicator

18
Packages/ohif-viewerbase/client/components/studyBrowser/imageThumbnail/imageThumbnail.js
View File

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