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>
|
<h3 class="panel-title">Patient Information</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
<div class="row">
|
<div>
|
||||||
<div class="col-xs-6">
|
<div>
|
||||||
Patient Name: <span data-dicom="x00100010"></span>
|
Patient Name: <span data-dicom="x00100010"></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-6">
|
<div>
|
||||||
Patient ID: <span data-dicom="x00100020"></span>
|
Patient ID: <span data-dicom="x00100020"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div>
|
||||||
<div class="col-xs-6">
|
<div>
|
||||||
Patient Birth Date: <span data-dicom="x00100030"></span>
|
Patient Birth Date: <span data-dicom="x00100030"></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-6">
|
<div>
|
||||||
Patient Sex: <span data-dicom="x00100040"></span>
|
Patient Sex: <span data-dicom="x00100040"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -53,27 +53,27 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
|
|||||||
<h3 class="panel-title">Study Information</h3>
|
<h3 class="panel-title">Study Information</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
<div class="row">
|
<div>
|
||||||
<div class="col-xs-6">
|
<div>
|
||||||
Study Description: <span data-dicom="x00081030"></span>
|
Study Description: <span data-dicom="x00081030"></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-6">
|
<div>
|
||||||
Protocol Name: <span data-dicom="x00181030"></span>
|
Protocol Name: <span data-dicom="x00181030"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div>
|
||||||
<div class="col-xs-6">
|
<div>
|
||||||
Accession #: <span data-dicom="x00080050"></span>
|
Accession #: <span data-dicom="x00080050"></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-6">
|
<div>
|
||||||
Study Id: <span data-dicom="x00200010"></span>
|
Study Id: <span data-dicom="x00200010"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div>
|
||||||
<div class="col-xs-6">
|
<div>
|
||||||
Study Date: <span data-dicom="x00080020"></span>
|
Study Date: <span data-dicom="x00080020"></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-6">
|
<div>
|
||||||
Study Time: <span data-dicom="x00080030"></span>
|
Study Time: <span data-dicom="x00080030"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -86,27 +86,27 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
|
|||||||
<h3 class="panel-title">Series Information</h3>
|
<h3 class="panel-title">Series Information</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
<div class="row">
|
<div>
|
||||||
<div class="col-xs-6">
|
<div>
|
||||||
Series Description: <span data-dicom="x0008103e"></span>
|
Series Description: <span data-dicom="x0008103e"></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-6">
|
<div>
|
||||||
Series #: <span data-dicom="x00200011"></span>
|
Series #: <span data-dicom="x00200011"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div>
|
||||||
<div class="col-xs-6">
|
<div>
|
||||||
Modality: <span data-dicom="x00080060"></span>
|
Modality: <span data-dicom="x00080060"></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-6">
|
<div>
|
||||||
Body Part: <span data-dicom="x00180015"></span>
|
Body Part: <span data-dicom="x00180015"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div>
|
||||||
<div class="col-xs-6">
|
<div>
|
||||||
Series Date: <span data-dicom="x00080021"></span>
|
Series Date: <span data-dicom="x00080021"></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-6">
|
<div>
|
||||||
Series Time: <span data-dicom="x00080031"></span>
|
Series Time: <span data-dicom="x00080031"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -119,27 +119,27 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
|
|||||||
<h3 class="panel-title">Instance Information</h3>
|
<h3 class="panel-title">Instance Information</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
<div class="row">
|
<div>
|
||||||
<div class="col-xs-6">
|
<div>
|
||||||
Instance #: <span data-dicom="x00200013"></span>
|
Instance #: <span data-dicom="x00200013"></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-6">
|
<div>
|
||||||
Acquisition #: <span data-dicom="x00200012"></span>
|
Acquisition #: <span data-dicom="x00200012"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div>
|
||||||
<div class="col-xs-6">
|
<div>
|
||||||
Acquisition Date: <span data-dicom="x00080022"></span>
|
Acquisition Date: <span data-dicom="x00080022"></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-6">
|
<div>
|
||||||
Acquisition Time: <span data-dicom="x00080032"></span>
|
Acquisition Time: <span data-dicom="x00080032"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div>
|
||||||
<div class="col-xs-6">
|
<div>
|
||||||
Content Date: <span data-dicom="x00080023"></span>
|
Content Date: <span data-dicom="x00080023"></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-6">
|
<div>
|
||||||
Content Time: <span data-dicom="x00080033"></span>
|
Content Time: <span data-dicom="x00080033"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -154,64 +154,64 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
|
|||||||
<h3 class="panel-title">Image Information</h3>
|
<h3 class="panel-title">Image Information</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
<div class="row">
|
<div>
|
||||||
<div class="col-xs-6">
|
<div>
|
||||||
Rows: <span data-dicomUint="x00280010"></span>
|
Rows: <span data-dicomUint="x00280010"></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-6">
|
<div>
|
||||||
Columns: <span data-dicomUint="x00280011"></span>
|
Columns: <span data-dicomUint="x00280011"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div>
|
||||||
<div class="col-xs-6">
|
<div>
|
||||||
Photometric Interpretation: <span data-dicom="x00280004"></span>
|
Photometric Interpretation: <span data-dicom="x00280004"></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-6">
|
<div>
|
||||||
Image Type: <span data-dicom="x00080008"></span>
|
Image Type: <span data-dicom="x00080008"></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div>
|
||||||
<div class="col-xs-6">
|
<div>
|
||||||
Bits Allocated: <span data-dicomUint="x00280100"></span>
|
Bits Allocated: <span data-dicomUint="x00280100"></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-6">
|
<div>
|
||||||
Bits Stored: <span data-dicomUint="x00280101"></span>
|
Bits Stored: <span data-dicomUint="x00280101"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div>
|
||||||
<div class="col-xs-6">
|
<div>
|
||||||
HighBit: <span data-dicomUint="x00280102"></span>
|
HighBit: <span data-dicomUint="x00280102"></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-6">
|
<div>
|
||||||
Pixel Representation (0=us): <span data-dicomUint="x00280103"></span>
|
Pixel Representation (0=us): <span data-dicomUint="x00280103"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div>
|
||||||
<div class="col-xs-6">
|
<div>
|
||||||
Rescale Slope: <span data-dicom="x00281053"></span>
|
Rescale Slope: <span data-dicom="x00281053"></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-6">
|
<div>
|
||||||
Rescale Intercept: <span data-dicom="x00281052"></span>
|
Rescale Intercept: <span data-dicom="x00281052"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div>
|
||||||
<div class="col-xs-6">
|
<div>
|
||||||
Image Position Patient: <span data-dicom="x00200032"></span>
|
Image Position Patient: <span data-dicom="x00200032"></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-6">
|
<div>
|
||||||
Image Orientation Patient: <span data-dicom="x00200037"></span>
|
Image Orientation Patient: <span data-dicom="x00200037"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div>
|
||||||
<div class="col-xs-6">
|
<div>
|
||||||
Pixel Spacing: <span data-dicom="x00280030"></span>
|
Pixel Spacing: <span data-dicom="x00280030"></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-6">
|
<div>
|
||||||
Samples Per Pixel: <span data-dicomUint="x00280002"></span>
|
Samples Per Pixel: <span data-dicomUint="x00280002"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -224,33 +224,33 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
|
|||||||
<h3 class="panel-title">Equipment Information</h3>
|
<h3 class="panel-title">Equipment Information</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
<div class="row">
|
<div>
|
||||||
<div class="col-xs-6">
|
<div>
|
||||||
Manufacturer: <span data-dicom="x00080070"></span>
|
Manufacturer: <span data-dicom="x00080070"></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-6">
|
<div>
|
||||||
Model: <span data-dicom="x00081090"></span>
|
Model: <span data-dicom="x00081090"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div>
|
||||||
<div class="col-xs-6">
|
<div>
|
||||||
Station Name: <span data-dicom="x00081010"></span>
|
Station Name: <span data-dicom="x00081010"></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-6">
|
<div>
|
||||||
AE Title: <span data-dicom="x00020016"></span>
|
AE Title: <span data-dicom="x00020016"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div>
|
||||||
<div class="col-xs-12">
|
<div class="col-xs-12">
|
||||||
Institution Name: <span data-dicom="x00080080"></span>
|
Institution Name: <span data-dicom="x00080080"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div>
|
||||||
<div class="col-xs-12">
|
<div class="col-xs-12">
|
||||||
Software Version: <span data-dicom="x00181020"></span>
|
Software Version: <span data-dicom="x00181020"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div>
|
||||||
<div class="col-xs-12">
|
<div class="col-xs-12">
|
||||||
Implementation Version Name: <span data-dicom="x00020013"></span>
|
Implementation Version Name: <span data-dicom="x00020013"></span>
|
||||||
</div>
|
</div>
|
||||||
@@ -263,37 +263,37 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
|
|||||||
<h3 class="panel-title">UIDS</h3>
|
<h3 class="panel-title">UIDS</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
<div class="row">
|
<div>
|
||||||
<div class="col-xs-12">
|
<div class="col-xs-12">
|
||||||
Study UID: <span data-dicom="x0020000d"></span>
|
Study UID: <span data-dicom="x0020000d"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div>
|
||||||
<div class="col-xs-12">
|
<div class="col-xs-12">
|
||||||
Series UID: <span data-dicom="x0020000e"></span>
|
Series UID: <span data-dicom="x0020000e"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div>
|
||||||
<div class="col-xs-12">
|
<div class="col-xs-12">
|
||||||
Instance UID: <span data-dicom="x00080018"></span>
|
Instance UID: <span data-dicom="x00080018"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div>
|
||||||
<div class="col-xs-12">
|
<div class="col-xs-12">
|
||||||
SOP Class UID: <span data-dicom="x00080016"></span>
|
SOP Class UID: <span data-dicom="x00080016"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div>
|
||||||
<div class="col-xs-12">
|
<div class="col-xs-12">
|
||||||
Transfer Syntax UID: <span data-dicom="x00020010"></span>
|
Transfer Syntax UID: <span data-dicom="x00020010"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div>
|
||||||
<div class="col-xs-12">
|
<div class="col-xs-12">
|
||||||
Frame of Reference UID: <span data-dicom="x00200052"></span>
|
Frame of Reference UID: <span data-dicom="x00200052"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div>
|
||||||
<div class="col-xs-12">
|
<div class="col-xs-12">
|
||||||
WADO URL:
|
WADO URL:
|
||||||
<div style="overflow:auto">
|
<div style="overflow:auto">
|
||||||
@@ -541,6 +541,10 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
|
|||||||
loadAnnotation(imageId, annotation);
|
loadAnnotation(imageId, annotation);
|
||||||
|
|
||||||
imageIds.push(imageId);
|
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
|
// Treat application/octet-stream as if they are dicoms
|
||||||
} else if (data_url.startsWith("data:application/dicom") || data_url.startsWith("data:application/octet-stream")) {
|
} 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) {
|
if (images.length > 1 && load_as_stack == false) {
|
||||||
$(".canvas-panel").append("<div id='image-thumbs'></div>");
|
$(".canvas-panel").append("<div id='image-thumbs'></div>");
|
||||||
for (let id = 0; id < images.length; id++) {
|
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;
|
let img;
|
||||||
|
|
||||||
|
console.log("load thumb", image_url);
|
||||||
|
|
||||||
if (image_url.startsWith("data")) {
|
if (image_url.startsWith("data")) {
|
||||||
// based (image) data url, just load the image directly
|
// based (image) data url, just load the image directly
|
||||||
if (image_url.startsWith("data:image/")) {
|
if (image_url.startsWith("data:image/")) {
|
||||||
@@ -647,24 +669,16 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
|
|||||||
dfile
|
dfile
|
||||||
);
|
);
|
||||||
cornerstone.loadAndCacheImage(imageId).then(function (image) {
|
cornerstone.loadAndCacheImage(imageId).then(function (image) {
|
||||||
img = $("<div></div>").get(0);
|
loadCornerstoneThumb(image, id);
|
||||||
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) {
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
} else {
|
} 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 />", {
|
img = $("<img />", {
|
||||||
src: image_url,
|
src: image_url,
|
||||||
id: "thumb-image-" + id,
|
id: "thumb-image-" + id,
|
||||||
@@ -680,21 +694,8 @@ export function loadCornerstone(main_element, db, images, annotations_to_load, l
|
|||||||
} else {
|
} else {
|
||||||
|
|
||||||
let url = "wadouri:" + image_url;
|
let url = "wadouri:" + image_url;
|
||||||
console.log(url)
|
|
||||||
cornerstone.loadAndCacheImage(url).then(function (image) {
|
cornerstone.loadAndCacheImage(url).then(function (image) {
|
||||||
img = $("<div></div>").get(0);
|
loadCornerstoneThumb(image, id);
|
||||||
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);
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user