cornerstone Web Image Loader

A cornerstone Image Loader for web images (PNG, JPEG).

Live Examples

Click here for a live example of this library in use!

View the simple image viewer built on cornerstone.

Install

Get a packaged source file:

• cornerstoneWebImageLoader.js
• cornerstoneWebImageLoader.min.js

Or install via NPM:

npm install cornerstone-web-image-loader

Usage

Simply include the cornerstoneWebImageLoader.js in your HTML file after you load cornerstone.js and then set the cornerstone instance as an external module for cornerstoneWebImageLoader:

cornerstoneWebImageLoader.external.cornerstone = cornerstone;

This will let cornerstoneWebImageLoader register itself with cornerstone to load imageId's that have the http or https url schemes. To display an image, pass the url to the image as the imageId parameter to a cornerstone API function loadImage().

Key Features

• Provides a bridge between the cornerstone library and standard web images
• Allows XHR to be hooked so custom http headers can be added (e.g. for authentication). View the source of the example to see how this is done.

Contributors

@onluiz for fixing a bug with images not being properly invalidated @leonardorame for adding support for CornerstoneImageLoadProgress

Build System

This project uses webpack to build the software.

Pre-requisites:

NodeJs - click to visit web site for installation instructions.

Common Tasks

Update dependencies (after each pull):

npm install

Running the build:

npm start

Automatically running the build and unit tests after each source change:

npm run watch

Why is this a separate library from cornerstone?

Cornerstone was designed to support loading of any kind of image regardless of its container, compression algorithm, encoding or transport. This is one of many possible image loaders that can provide the image pixel data to cornerstone to display

Copyright

Copyright 2017 Chris Hafey chafey@gmail.com

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog and this project adheres to Semantic Versioning.

[2.1.0] - 2018-04-11

Changed

• Updated Webpack to version 4
• DIST folder is now removed from the repository

[2.0.0] - 2017-12-08

Changed

• Breaking Change!!! Switches image loader return values to support the breaking change in Cornerstone Master (https://github.com/cornerstonejs/cornerstone/commit/9448755397da10a6de6f694d83123274cbd4b38e) which requires image loaders to return an object of the form { promise, cancelFn }.
• Breaking Change!!! Removed jQuery events from triggerEvent, lower-cased all the event names (i.e. 'cornerstoneimageloadprogress').
• Breaking Change!!! Switched all Deferred usage to use Promises
• Performance: Switch getPixelData to just return the canvas imageData.data. The previous loop to set alpha channel to 255 is unnecessary since we can now just set image.rgba = false.
• Set image.rgba to false by default. Users can change this to have the image rendered with the alpha channel intact.
• Switch event triggering to use cornerstone.triggerEvent
• Switched this changelog to try to follow http://keepachangelog.com/en/1.0.0/

[1.0.0]

• Updated to 1.0.0 because 0.8.5 introduced a breaking change with Cornerstone / jQuery injection. This doesn't break usage if you are using HTML script tags, but if you are using a module system, Cornerstone Web Image Loader may not properly find its dependencies.

The solution for this is to inject your Cornerstone instance into Cornerstone Tools as follows:

cornerstoneWebImageLoader.external.$ = $;
cornerstoneWebImageLoader.external.cornerstone = cornerstone;

An example commit doing something similar in the OHIF Viewer Meteor application is here: https://github.com/OHIF/Viewers/commit/012bba44806d0fb9bb60af329c4875e7f6b751e0#diff-d9ccd906dfc48b4589d720766fe14715R25

We apologize for any headaches that the breaking change in 0.8.5 may have caused for those using module systems.

• Note: the dependencies have been updated to require Cornerstone Core 1.0.0 or above

[0.8.6] (deprecated due to breaking change)

• Added native CustomEvents that are triggered parallel to the jQuery events. This is part of a transition to drop the jQuery dependency entirely.
• Note: This version requires Cornerstone Core 0.13.2 or above, where cornerstone.events has the EventTarget interface!

e.g. CornerstoneImageLoadProgress has a native CustomEvent name 'cornerstoneimageloadprogress'

[0.8.5] (deprecated due to breaking change)

• Add Jquery and Cornerstone as injection dependencies