ohif-viewer/StandaloneViewer/client/cornerstoneWebImageLoader.js

/*! cornerstoneWebImageLoader - v0.6.0 - 2016-02-09 | (c) 2015 Chris Hafey | https://github.com/chafey/cornerstoneWebImageLoader */
cornerstoneWebImageLoader = {};
//
// This is a cornerstone image loader for web images such as PNG and JPEG
//

(function ($, cornerstone, cornerstoneWebImageLoader) {

    "use strict";

    var canvas = document.createElement('canvas');
    var lastImageIdDrawn = "";


    var options = {
        // callback allowing customization of the xhr (e.g. adding custom auth headers, cors, etc)
        beforeSend : function(xhr) {}
    };

    function createImageObject(image, imageId)
    {
        // extract the attributes we need
        var rows = image.naturalHeight;
        var columns = image.naturalWidth;

        function getPixelData()
        {
            var imageData = getImageData();
            var imageDataData = imageData.data;
            var numPixels = image.naturalHeight * image.naturalWidth;
            var storedPixelData = new Uint8Array(numPixels * 4);
            var imageDataIndex = 0;
            var storedPixelDataIndex = 0;
            for(var i=0; i < numPixels; i++) {
                storedPixelData[storedPixelDataIndex++] = imageDataData[imageDataIndex++];
                storedPixelData[storedPixelDataIndex++] = imageDataData[imageDataIndex++];
                storedPixelData[storedPixelDataIndex++] = imageDataData[imageDataIndex++];
                storedPixelData[storedPixelDataIndex++] = 255; // alpha
                imageDataIndex++;
            }
            return storedPixelData;
        }

        function getImageData()
        {
            var context;
            if(lastImageIdDrawn !== imageId) {
                canvas.height = image.naturalHeight;
                canvas.width = image.naturalWidth;
                context = canvas.getContext('2d');
                context.drawImage(image, 0, 0);
                lastImageIdDrawn = imageId;
            }
            else {
                context = canvas.getContext('2d');
            }
            return context.getImageData(0, 0, image.naturalWidth, image.naturalHeight);
        }

        function getCanvas()
        {
            if(lastImageIdDrawn === imageId) {
                return canvas;
            }

            canvas.height = image.naturalHeight;
            canvas.width = image.naturalWidth;
            var context = canvas.getContext('2d');
            context.drawImage(image, 0, 0);
            lastImageIdDrawn = imageId;
            return canvas;
        }

        function getImage()
        {
            return image;
        }

        // Extract the various attributes we need
        return {
            imageId : imageId,
            minPixelValue : 0, // calculated below
            maxPixelValue : 255, // calculated below
            slope: 1.0,
            intercept: 0,
            windowCenter : 128,
            windowWidth : 255,
            render: cornerstone.renderColorImage,
            getPixelData: getPixelData,
            getImageData: getImageData,
            getCanvas: getCanvas,
            getImage: getImage,
            //storedPixelData: extractStoredPixels(image),
            rows: rows,
            columns: columns,
            height: rows,
            width: columns,
            color: true,
            columnPixelSpacing: undefined,
            rowPixelSpacing: undefined,
            invert: false,
            sizeInBytes : rows * columns * 4 // we don't know for sure so we over estimate to be safe
        };
    }

    // Loads an image given a url to an image
    function loadImage(imageId) {

        // create a deferred object
        var deferred = $.Deferred();

        var image = new Image();

        var xhr = new XMLHttpRequest();
        xhr.open("GET", imageId, true);
        xhr.responseType = "arraybuffer";
        options.beforeSend(xhr);
        xhr.onload = function() {
            var arrayBufferView = new Uint8Array(this.response);
            var blob = new Blob([arrayBufferView], {type: "image/jpeg"});
            var urlCreator = window.URL || window.webkitURL;
            var imageUrl = urlCreator.createObjectURL(blob);
            image.src = imageUrl;
            image.onload = function() {
                var imageObject = createImageObject(image, imageId);
                deferred.resolve(imageObject);
                urlCreator.revokeObjectURL(imageUrl);
            };
            image.onerror = function() {
                urlCreator.revokeObjectURL(imageUrl);
                deferred.reject();
            };
        };
        xhr.onprogress = function(oProgress) {

            if (oProgress.lengthComputable) {  //evt.loaded the bytes browser receive
                //evt.total the total bytes seted by the header
                //
                var loaded = oProgress.loaded;
                var total = oProgress.total;
                var percentComplete = Math.round((loaded / total)*100);

                $(cornerstone).trigger('CornerstoneImageLoadProgress', {
                    imageId: imageId,
                    loaded: loaded,
                    total: total,
                    percentComplete: percentComplete
                });
            }
        };
        xhr.send();
        return deferred.promise();
    }

    function configure(opts) {
        options = opts;
    }

    // steam the http and https prefixes so we can use standard web urls directly
    cornerstone.registerImageLoader('http', loadImage);
    cornerstone.registerImageLoader('https', loadImage);
    cornerstoneWebImageLoader.configure = configure;
    return cornerstone;
}($, cornerstone, cornerstoneWebImageLoader));