Skip to content

Instantly share code, notes, and snippets.

@dannyrb

dannyrb/index.html

Created January 27, 2020 15:47
Show Gist options
  • Save dannyrb/18380ffcbf4402164e5063921dbb02a8 to your computer and use it in GitHub Desktop.
Save dannyrb/18380ffcbf4402164e5063921dbb02a8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>My first Cornerstone Tools app</title>
<!-- Dependencies -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></script>
<!-- development version, includes helpful console warnings -->
<script src="https://unpkg.com/[email protected]"></script>
<style>
.cornerstone-element-wrapper,
.cornerstone-element {
width: 512px;
height: 512px;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- Our beautiful element target -->
<div class="cornerstone-element-wrapper">
<div
class="cornerstone-element"
data-index="0"
oncontextmenu="return false"
></div>
</div>
<script>
// Init Cornerstone Tools
cornerstoneTools.external.cornerstone = cornerstone;
cornerstoneTools.external.Hammer = Hammer;
cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
cornerstoneTools.init({
globalToolSyncEnabled: true
});
// Setup Tools
cornerstoneTools.addTool(cornerstoneTools.WwwcTool);
cornerstoneTools.setToolActive("Wwwc", { mouseButtonMask: 1 });
cornerstoneTools.addTool(cornerstoneTools.ZoomTool);
cornerstoneTools.setToolActive("Zoom", { mouseButtonMask: 2 });
cornerstoneTools.addTool(cornerstoneTools.PanTool);
cornerstoneTools.setToolActive("Pan", { mouseButtonMask: 4 });
// Image Loader
cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
cornerstoneWADOImageLoader.webWorkerManager.initialize({
maxWebWorkers: navigator.hardwareConcurrency || 1,
startWebWorkersOnDemand: true,
taskConfiguration: {
decodeTask: {
initializeCodecsOnStartup: false,
usePDFJS: false,
strict: false
}
}
});
// Enable element
const element = document.querySelector(".cornerstone-element");
cornerstone.enable(element);
// Display our image on the "enabled element"
const imageId =
"dicomweb:https://www.asteris.biz/Keystone/ImageDownload.aspx?ClinicCode=TESTKEYSTONE&ImageId=01b1755e-33d1-4b24-b9af-a4a019689d5f&ImageType=DicomImage&FrameIndex=0";
cornerstone.loadImage(imageId).then(function(image) {
cornerstone.displayImage(element, image);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment