Skip to content

Commit c993fdb

Browse files
Zaid-Safadiswederik
Zaid-Safadi
and
swederik
authored
fix: displaying images (series) with different sizes causes the image (#462) (#465)
* fix: displaying images (series) with different sizes causes the image… (#462) * fix: displaying images (series) with different sizes causes the image to be clipped #304 * add example to display multiple images with different sizes * fix createViewport test Co-authored-by: swederik <[email protected]>
1 parent 95516bf commit c993fdb

25 files changed

+439
-163
lines changed

‎example/differentsizes/index.html

+141
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<!-- twitter bootstrap CSS stylesheet - included to make things pretty, not needed or used by cornerstone -->
5+
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
6+
</head>
7+
<body>
8+
<div class="container">
9+
10+
<h1>
11+
displayDifferentSizes/index.html
12+
</h1>
13+
14+
This is an example of changing the image displayed in an element with different sizes
15+
and the option to set a displayedArea in the viewport. This is used to show how to reset
16+
the displayedArea on the viewport when the stack images are of different size. Use the mouse wheel
17+
to change between images or press the buttons below.
18+
<br>
19+
<br>
20+
<input type="checkbox" id="ApplyDisplayedArea"/>
21+
<label for="ApplyDisplayedArea">Apply Displayed Area</label>
22+
<button id="imageButton1" type="button" class="btn btn-default">Image #1</button>
23+
<button id="imageButton2" type="button" class="btn btn-default">Image #2</button>
24+
<button id="imageButton3" type="button" class="btn btn-default">Image #3</button>
25+
<br>
26+
<span><b>Image Size:</b></span><span id="imgSize"></span><span> | </span>
27+
<span><b>Displayed Area:</b></span><span id="displayedAreaSize"></span>
28+
<br>
29+
<div id="dicomImage" style="width:512px;height:512px"
30+
oncontextmenu="return false"
31+
onmousedown="return false">
32+
</div>
33+
</div>
34+
</body>
35+
36+
<!-- include the cornerstone library -->
37+
<script src="../../dist/cornerstone.js"></script>
38+
<script>window.cornerstone || document.write('<script src="https://unpkg.com/cornerstone-core">\x3C/script>')</script>
39+
<script src="../exampleImageIdLoaderRaw.js"></script>
40+
41+
<script>
42+
const element = document.getElementById('dicomImage');
43+
cornerstone.enable(element);
44+
45+
const imageIds = [
46+
'example://test1',
47+
'example://test2',
48+
'example://test3'
49+
];
50+
51+
let currentImageIndex = 0;
52+
element.addEventListener('cornerstonenewimage', (eventData) => {
53+
cornerstone.fitToWindow(eventData.detail.element);
54+
});
55+
56+
// show image #1 initially
57+
function updateTheImage(imageIndex) {
58+
currentImageIndex = imageIndex;
59+
cornerstone.loadImage(imageIds[currentImageIndex]).then(function(image) {
60+
const viewport = cornerstone.getViewport(element) || {};
61+
const applyDisplayedArea = document.getElementById("ApplyDisplayedArea");
62+
const imgSize = document.getElementById("imgSize");
63+
const displayedAreaSize = document.getElementById("displayedAreaSize");
64+
65+
imgSize.textContent = image.width + "x" + image.height;
66+
67+
viewport.voi = viewport.voi || {};
68+
viewport.voi.windowWidth = image.windowWidth;
69+
viewport.voi.windowCenter = image.windowCenter;
70+
71+
if (applyDisplayedArea.checked){
72+
if (!viewport.displayedArea) {
73+
viewport.displayedArea = {
74+
// Top Left Hand Corner
75+
tlhc: {
76+
x: 1,
77+
y: 1
78+
},
79+
// Bottom Right Hand Corner
80+
brhc: {
81+
x: 256,
82+
y: 256
83+
},
84+
rowPixelSpacing: 1,
85+
columnPixelSpacing: 1,
86+
//presentationSizeMode: 'SCALE TO FIT'
87+
presentationSizeMode: 'None'
88+
};
89+
90+
displayedAreaSize.textContent = viewport.displayedArea.brhc.x + "x" + viewport.displayedArea.brhc.y;
91+
}
92+
} else {
93+
viewport.displayedArea = undefined;
94+
displayedAreaSize.textContent = "none";
95+
}
96+
97+
cornerstone.displayImage(element, image, viewport);
98+
});
99+
}
100+
101+
updateTheImage(0);
102+
103+
document.getElementById('ApplyDisplayedArea').addEventListener('change', function (e) {
104+
updateTheImage(currentImageIndex);
105+
});
106+
107+
// Add event handlers to change images
108+
document.getElementById('imageButton1').addEventListener('click', function (e) {
109+
updateTheImage(0);
110+
});
111+
112+
document.getElementById('imageButton2').addEventListener('click', function (e) {
113+
updateTheImage(1);
114+
});
115+
116+
document.getElementById('imageButton3').addEventListener('click', function (e) {
117+
updateTheImage(2);
118+
});
119+
120+
const wheelEvents = ['mousewheel', 'DOMMouseScroll'];
121+
122+
wheelEvents.forEach((eventType) => {
123+
element.addEventListener(eventType, function (e) {
124+
// Firefox e.detail > 0 scroll back, < 0 scroll forward
125+
// chrome/safari e.wheelDelta < 0 scroll back, > 0 scroll forward
126+
if (e.wheelDelta < 0 || e.detail > 0) {
127+
if (currentImageIndex < imageIds.length - 1) {
128+
updateTheImage(++currentImageIndex);
129+
}
130+
} else {
131+
if (currentImageIndex > 0) {
132+
updateTheImage(--currentImageIndex);
133+
}
134+
}
135+
136+
// Prevent page fom scrolling
137+
return false;
138+
});
139+
});
140+
</script>
141+
</html>

‎example/differentsizes/test-cases/test1.json

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"imageId": "example//test1",
3+
"minPixelValue": 0,
4+
"maxPixelValue": 2143,
5+
"slope": 1.0,
6+
"intercept": -1024,
7+
"windowCenter": 36,
8+
"windowWidth": 360,
9+
"rows": 512,
10+
"columns": 512,
11+
"height": 512,
12+
"width": 512,
13+
"color": false,
14+
"columnPixelSpacing": 0.8769,
15+
"rowPixelSpacing": 0.8769,
16+
"sizeInBytes": 524288
17+
}

‎example/differentsizes/test-cases/test1.txt

+1
Large diffs are not rendered by default.

‎example/differentsizes/test-cases/test2.json

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"imageId": "example//test2",
3+
"minPixelValue": 0,
4+
"maxPixelValue": 1695,
5+
"slope": 1.0,
6+
"intercept": 0,
7+
"windowCenter": 844,
8+
"windowWidth": 2677,
9+
"rows": 256,
10+
"columns": 256,
11+
"height": 256,
12+
"width": 256,
13+
"color": false,
14+
"columnPixelSpacing": 0.234,
15+
"rowPixelSpacing": 0.234,
16+
"sizeInBytes": 131072
17+
}

‎example/differentsizes/test-cases/test2.txt

+1
Large diffs are not rendered by default.

‎example/differentsizes/test-cases/test3.json

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"imageId": "example//test3",
3+
"minPixelValue": 15664,
4+
"maxPixelValue": 65535,
5+
"slope": 1.0,
6+
"intercept": 0,
7+
"windowCenter": 43079,
8+
"windowWidth": 12666,
9+
"rows": 1876,
10+
"columns": 1620,
11+
"height": 1876,
12+
"width": 1620,
13+
"color": false,
14+
"columnPixelSpacing": 0.15583,
15+
"rowPixelSpacing": 0.15583,
16+
"sizeInBytes": 6078240
17+
}

‎example/differentsizes/test-cases/test3.txt

+1
Large diffs are not rendered by default.

‎example/displayedArea/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<div class="container">
99

1010
<h1>
11-
displaedArea/index.html
11+
displayed/index.html
1212
</h1>
1313

1414
This example demonstrates the IHE Image Display Test 521: Consistent Presentation of Images.

‎example/exampleImageIdLoaderRaw.js

+65-51
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,85 @@
11
(function (cs) {
22

3-
"use strict";
43

5-
function getExampleImage(imageId) {
6-
let testCase = imageId.split('//')[1];
4+
function getExampleImage (imageId) {
5+
const testCase = imageId.split('//')[1];
76

8-
return {
9-
promise: new Promise((resolve) => {
10-
getImagePixel(testCase).then((imagePixel) => {
11-
getImageData(testCase).then((imageData) => {
12-
imageData.getPixelData = () => { return imagePixel; };
7+
return {
8+
promise: new Promise((resolve) => {
9+
getImageData(testCase).then((imageData) => {
10+
getImagePixel(testCase, imageData).then((imagePixel) => {
11+
imageData.getPixelData = () => imagePixel;
1312

14-
resolve(imageData);
15-
});
16-
});
13+
resolve(imageData);
14+
});
15+
});
16+
}),
17+
cancelFn: undefined
18+
};
1719

18-
}),
19-
cancelFn: undefined
20-
};
20+
function getImagePixel (imageId, imageData) {
21+
const promise = new Promise((resolve) => {
22+
const req = new XMLHttpRequest();
23+
24+
req.onreadystatechange = function () {
25+
if (this.readyState === 4 && this.status === 200) {
26+
const imageRaw = req.responseText;
27+
const bpp = imageData.sizeInBytes / (imageData.width * imageData.height);
28+
29+
if (bpp === 1) {
30+
const pixelData = Uint8Array.from(atob(imageRaw), (c) => c.charCodeAt(0));
2131

22-
function getImagePixel(imageId) {
23-
let promise = new Promise((resolve) => {
24-
var req = new XMLHttpRequest();
25-
req.onreadystatechange = function () {
26-
if (this.readyState == 4 && this.status === 200 ) {
27-
let imageRaw = req.responseText;
28-
let pixelData = Uint8Array.from(atob(imageRaw), c => c.charCodeAt(0));
32+
resolve(pixelData);
33+
} else if (bpp === 2) {
34+
const decodedData = atob(imageRaw);
35+
const pixelData = new Uint16Array(decodedData.length / 2);
36+
let count = 0;
37+
38+
for (let i = 0; i < pixelData.length; i++) {
39+
pixelData[i] = decodedData.charCodeAt(count++) + (decodedData.charCodeAt(count++) << 8);
2940

30-
resolve(pixelData);
3141
}
42+
43+
resolve(pixelData);
3244
}
33-
req.open('GET', baseUrl + imageId + '.txt', true);
34-
req.send();
35-
});
45+
}
46+
};
47+
req.open('GET', `${baseUrl + imageId}.txt`, true);
48+
req.send();
49+
});
50+
51+
return promise;
52+
}
3653

37-
return promise;
38-
}
54+
function getImageData (imageId) {
55+
const promise = new Promise((resolve) => {
56+
const req = new XMLHttpRequest();
3957

40-
function getImageData(imageId) {
41-
let promise = new Promise((resolve) => {
42-
var req = new XMLHttpRequest();
43-
req.onreadystatechange = function () {
44-
if (this.readyState === 4 && this.status === 200) {
45-
let imageData = req.responseText;
58+
req.onreadystatechange = function () {
59+
if (this.readyState === 4 && this.status === 200) {
60+
const imageData = req.responseText;
4661

47-
try {
48-
let image = JSON.parse(imageData);
62+
try {
63+
const image = JSON.parse(imageData);
4964

50-
resolve(image);
51-
}
52-
catch (err) {
53-
console.error(err);
54-
}
55-
}
65+
resolve(image);
66+
} catch (err) {
67+
console.error(err);
5668
}
57-
req.open('GET', baseUrl + imageId + '.json', true);
58-
req.send();
59-
});
69+
}
70+
};
71+
req.open('GET', `${baseUrl + imageId}.json`, true);
72+
req.send();
73+
});
6074

61-
return promise;
62-
}
75+
return promise;
6376
}
77+
}
78+
6479

65-
66-
var baseUrl = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/')) + '/test-cases/';
80+
var baseUrl = `${window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/'))}/test-cases/`;
6781

68-
// register our imageLoader plugin with cornerstone
69-
cs.registerImageLoader('example', getExampleImage);
82+
// register our imageLoader plugin with cornerstone
83+
cs.registerImageLoader('example', getExampleImage);
7084

71-
}(cornerstone));
85+
})(cornerstone);

‎example/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ <h1>
4040
<li><a href="falseColorMapping/index.html">False Color Mapping</a></li>
4141
<li><a href="layers/index.html">Composite Images</a></li>
4242
<li><a href="displayedArea/index.html">DICOM Displayed Area Module support</a></li>
43+
<li><a href="differentsizes/index.html">Display different image sizes</a></li>
4344
</ul>
4445

4546

‎package-lock.json

+3-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)