improve thumbnail loading
This commit is contained in:
Ross
+100
-99
@@ -29,19 +29,19 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
|
||||
<h3 class="panel-title">Patient Information</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
<div>
|
||||
Patient Name: <span data-dicom="x00100010"></span>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
Patient ID: <span data-dicom="x00100020"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
<div>
|
||||
Patient Birth Date: <span data-dicom="x00100030"></span>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
Patient Sex: <span data-dicom="x00100040"></span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -53,27 +53,27 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
|
||||
<h3 class="panel-title">Study Information</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
<div>
|
||||
Study Description: <span data-dicom="x00081030"></span>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
Protocol Name: <span data-dicom="x00181030"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
<div>
|
||||
Accession #: <span data-dicom="x00080050"></span>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
Study Id: <span data-dicom="x00200010"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
<div>
|
||||
Study Date: <span data-dicom="x00080020"></span>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
Study Time: <span data-dicom="x00080030"></span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -86,27 +86,27 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
|
||||
<h3 class="panel-title">Series Information</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
<div>
|
||||
Series Description: <span data-dicom="x0008103e"></span>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
Series #: <span data-dicom="x00200011"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
<div>
|
||||
Modality: <span data-dicom="x00080060"></span>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
Body Part: <span data-dicom="x00180015"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
<div>
|
||||
Series Date: <span data-dicom="x00080021"></span>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
Series Time: <span data-dicom="x00080031"></span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -119,27 +119,27 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
|
||||
<h3 class="panel-title">Instance Information</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
<div>
|
||||
Instance #: <span data-dicom="x00200013"></span>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
Acquisition #: <span data-dicom="x00200012"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
<div>
|
||||
Acquisition Date: <span data-dicom="x00080022"></span>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
Acquisition Time: <span data-dicom="x00080032"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
<div>
|
||||
Content Date: <span data-dicom="x00080023"></span>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
Content Time: <span data-dicom="x00080033"></span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -154,64 +154,64 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
|
||||
<h3 class="panel-title">Image Information</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
<div>
|
||||
Rows: <span data-dicomUint="x00280010"></span>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
Columns: <span data-dicomUint="x00280011"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
<div>
|
||||
Photometric Interpretation: <span data-dicom="x00280004"></span>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
Image Type: <span data-dicom="x00080008"></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
<div>
|
||||
Bits Allocated: <span data-dicomUint="x00280100"></span>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
Bits Stored: <span data-dicomUint="x00280101"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
<div>
|
||||
HighBit: <span data-dicomUint="x00280102"></span>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
Pixel Representation (0=us): <span data-dicomUint="x00280103"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
<div>
|
||||
Rescale Slope: <span data-dicom="x00281053"></span>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
Rescale Intercept: <span data-dicom="x00281052"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
<div>
|
||||
Image Position Patient: <span data-dicom="x00200032"></span>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
Image Orientation Patient: <span data-dicom="x00200037"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
<div>
|
||||
Pixel Spacing: <span data-dicom="x00280030"></span>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
Samples Per Pixel: <span data-dicomUint="x00280002"></span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -224,33 +224,33 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
|
||||
<h3 class="panel-title">Equipment Information</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
<div>
|
||||
Manufacturer: <span data-dicom="x00080070"></span>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
Model: <span data-dicom="x00081090"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
<div>
|
||||
Station Name: <span data-dicom="x00081010"></span>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div>
|
||||
AE Title: <span data-dicom="x00020016"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div>
|
||||
<div class="col-xs-12">
|
||||
Institution Name: <span data-dicom="x00080080"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div>
|
||||
<div class="col-xs-12">
|
||||
Software Version: <span data-dicom="x00181020"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div>
|
||||
<div class="col-xs-12">
|
||||
Implementation Version Name: <span data-dicom="x00020013"></span>
|
||||
</div>
|
||||
@@ -263,37 +263,37 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
|
||||
<h3 class="panel-title">UIDS</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="row">
|
||||
<div>
|
||||
<div class="col-xs-12">
|
||||
Study UID: <span data-dicom="x0020000d"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div>
|
||||
<div class="col-xs-12">
|
||||
Series UID: <span data-dicom="x0020000e"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div>
|
||||
<div class="col-xs-12">
|
||||
Instance UID: <span data-dicom="x00080018"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div>
|
||||
<div class="col-xs-12">
|
||||
SOP Class UID: <span data-dicom="x00080016"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div>
|
||||
<div class="col-xs-12">
|
||||
Transfer Syntax UID: <span data-dicom="x00020010"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div>
|
||||
<div class="col-xs-12">
|
||||
Frame of Reference UID: <span data-dicom="x00200052"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div>
|
||||
<div class="col-xs-12">
|
||||
WADO URL:
|
||||
<div style="overflow:auto">
|
||||
@@ -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 = $("<div></div>").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("<div id='image-thumbs'></div>");
|
||||
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 = $("<div></div>").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 = $("<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 = $("<div></div>").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);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user