-
-
Save dannyrb/63e5f4e76711f8539aea934357344e21 to your computer and use it in GitHub Desktop.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>My first Cornerstone Tools app</title> | |
| <!-- Dependencies --> | |
| <script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/cornerstone-math@0.1.6/dist/cornerstoneMath.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/cornerstone-core@2.2.6/dist/cornerstone.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/cornerstone-web-image-loader@2.1.0/dist/cornerstoneWebImageLoader.js"></script> | |
| <!-- development version, includes helpful console warnings --> | |
| <script src="https://cdn.jsdelivr.net/npm/cornerstone-tools@3.0.0-b.717/dist/cornerstoneTools.js"></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> | |
| // Register the web image loader (JPEG & PNG) | |
| cornerstoneWebImageLoader.external.cornerstone = window.cornerstone; | |
| cornerstone.registerImageLoader('http', cornerstoneWebImageLoader.loadImage); | |
| cornerstone.registerImageLoader('https', cornerstoneWebImageLoader.loadImage); | |
| // Initialize cornerstone tools, and create an "enabled element" | |
| // RE: An element that contains our canvas/viewport | |
| const csTools = cornerstoneTools.init(); | |
| const element = document.querySelector('.cornerstone-element'); | |
| cornerstone.enable(element); | |
| // Display our image on the "enabled element" | |
| const imageId = | |
| 'https://www.asteris.biz/Keystone/ImageDownload.aspx?ClinicCode=TESTKEYSTONE&ImageId=01b1755e-33d1-4b24-b9af-a4a019689d5f&ImageType=PreviewImage&FrameIndex=0'; | |
| cornerstone.loadImage(imageId).then(function (image) { | |
| cornerstone.displayImage(element, image); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This is using a beta version of v3. It has changed slightly, and the setup is different if you're using the wado image loader.
@DannRB do you have a link to a more updated example? And yes, I'm using the wado loader as well. I'm building an image viewer application for viewing static images and dicoms and being able to move them around and use all the tools.
Here is a simple code sandbox that uses up-to-date version of cornerstone-tools and the WADO image loader:
Thank you
@dannyrb The image loader is the same as the v3 example then? Only the wado image loader changed?
I don't believe the WebImageLoader has changed much / at all. It's a bit easier to setup, so I tend to use the WADO Image Loader in examples as it tends to trip people up more frequently. It's also almost always preferable to use the WADO Image Loader.
Makes sense. Thank you
@dannyrb Has this syntax changed for the 4.9 version of the tools? I know that the web image loader is its own thing, but I just want to make sure.