From 8a9004120139f45a448bcfe50b606e359c413e89 Mon Sep 17 00:00:00 2001 From: Ross Date: Sat, 20 Nov 2021 09:43:05 +0000 Subject: [PATCH] improve thumbnail loading --- dicomViewer.js | 199 +++++++++++++++++++++++++------------------------ 1 file changed, 100 insertions(+), 99 deletions(-) diff --git a/dicomViewer.js b/dicomViewer.js index 6aff7a0..de8c908 100644 --- a/dicomViewer.js +++ b/dicomViewer.js @@ -29,19 +29,19 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l

Patient Information

-
-
+
+
Patient Name:
-
+
Patient ID:
-
-
+
+
Patient Birth Date:
-
+
Patient Sex:
@@ -53,27 +53,27 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l

Study Information

-
-
+
+
Study Description:
-
+
Protocol Name:
-
-
+
+
Accession #:
-
+
Study Id:
-
-
+
+
Study Date:
-
+
Study Time:
@@ -86,27 +86,27 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l

Series Information

-
-
+
+
Series Description:
-
+
Series #:
-
-
+
+
Modality:
-
+
Body Part:
-
-
+
+
Series Date:
-
+
Series Time:
@@ -119,27 +119,27 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l

Instance Information

-
-
+
+
Instance #:
-
+
Acquisition #:
-
-
+
+
Acquisition Date:
-
+
Acquisition Time:
-
-
+
+
Content Date:
-
+
Content Time:
@@ -154,64 +154,64 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l

Image Information

-
-
+
+
Rows:
-
+
Columns:
-
-
+
+
Photometric Interpretation:
-
+
Image Type:
-
-
+
+
Bits Allocated:
-
+
Bits Stored:
-
-
+
+
HighBit:
-
+
Pixel Representation (0=us):
-
-
+
+
Rescale Slope:
-
+
Rescale Intercept:
-
-
+
+
Image Position Patient:
-
+
Image Orientation Patient:
-
-
+
+
Pixel Spacing:
-
+
Samples Per Pixel:
@@ -224,33 +224,33 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l

Equipment Information

-
-
+
+
Manufacturer:
-
+
Model:
-
-
+
+
Station Name:
-
+
AE Title:
-
+
Institution Name:
-
+
Software Version:
-
+
Implementation Version Name:
@@ -263,37 +263,37 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l

UIDS

-
+
Study UID:
-
+
Series UID:
-
+
Instance UID:
-
+
SOP Class UID:
-
+
Transfer Syntax UID:
-
+
Frame of Reference UID:
-
+
WADO URL:
@@ -541,6 +541,10 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l loadAnnotation(imageId, annotation); imageIds.push(imageId); + } else if (data_url.startsWith("base64://") || data_url.startsWith("wadouri:")) { + loadAnnotation(data_url, annotation); + + imageIds.push(data_url); // Treat application/octet-stream as if they are dicoms } else if (data_url.startsWith("data:application/dicom") || data_url.startsWith("data:application/octet-stream")) { @@ -602,6 +606,22 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l }); } + function loadCornerstoneThumb(image, id) { + let img = $("
").get(0); + img.id = "thumb-image-" + id; + img.class = "thumbnail"; + img.title = + "Click on the thumbnail to view and manipulate the image."; + img.draggable = "false"; + img.style = "height: 100px; width: 100px"; + $("#thumb-" + id).append(img); + + const element = document.getElementById("thumb-image-" + id); + cornerstone.enable(element); + cornerstone.displayImage(element, image); + cornerstone.resize(element); + } + if (images.length > 1 && load_as_stack == false) { $(".canvas-panel").append("
"); for (let id = 0; id < images.length; id++) { @@ -622,6 +642,8 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l let img; + console.log("load thumb", image_url); + if (image_url.startsWith("data")) { // based (image) data url, just load the image directly if (image_url.startsWith("data:image/")) { @@ -647,24 +669,16 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l dfile ); cornerstone.loadAndCacheImage(imageId).then(function (image) { - img = $("
").get(0); - img.id = "thumb-image-" + id; - img.class = "thumbnail"; - img.title = - "Click on the thumbnail to view and manipulate the image."; - img.draggable = "false"; - img.style = "height: 100px; width: 100px"; - $("#thumb-" + id).append(img); - - const element = document.getElementById("thumb-image-" + id); - cornerstone.enable(element); - cornerstone.displayImage(element, image); - cornerstone.resize(element); - }); //.catch( function(error) { + loadCornerstoneThumb(image, id); + }); }); } } else { - if (!image_url.endsWith("dicom") && !image_url.endsWith("dcm")) { + if (image_url.startsWith("wadouri") || image_url.startsWith("base64")) { + cornerstone.loadAndCacheImage(image_url).then(function (image) { + loadCornerstoneThumb(image, id); + }); + } else if ((!image_url.endsWith("dicom") && !image_url.endsWith("dcm"))) { img = $("", { src: image_url, id: "thumb-image-" + id, @@ -680,21 +694,8 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l } else { let url = "wadouri:" + image_url; - console.log(url) cornerstone.loadAndCacheImage(url).then(function (image) { - img = $("
").get(0); - img.id = "thumb-image-" + id; - img.class = "thumbnail"; - img.title = - "Click on the thumbnail to view and manipulate the image."; - img.draggable = "false"; - img.style = "height: 100px; width: 100px"; - $("#thumb-" + id).append(img); - - const element = document.getElementById("thumb-image-" + id); - cornerstone.enable(element); - cornerstone.displayImage(element, image); - cornerstone.resize(element); + loadCornerstoneThumb(image, id); }); } }