OpenSeaDragon

by gmdavis62

HTML

<div id="seadragon-viewer" style="width:100%; height:650px;"></div>
<script src="//openseadragon.github.io/openseadragon/openseadragon.min.js"></script>

JavaScript

var imagePrefix = 'http://image-processing-jpeg-proxy.cmh.pgtest.evinternal.net/jpeg?source=s3://evtech-us-east-2-pg-test-marianas-ux/IPTEST013/frame-extraction/results/images/d37fac97/0001/Cam02/00000057';
function preloadImages(array) {
    if (!preloadImages.list) {
        preloadImages.list = [];
    }
    var list = preloadImages.list;
    for (var i = 0; i < array.length; i++) {
        var img = new Image();
        img.onload = function() {
            var index = list.indexOf(this);
            if (index !== -1) {
                // remove image from the array once it's loaded
                // for memory consumption reasons
                list.splice(index, 1);
            }
        }
        list.push(img);
        img.src = array[i];
    }
}

preloadImages([imagePrefix+'.jp2',imagePrefix+'.2.jp2',imagePrefix+'.4.jp2']);

var viewer = OpenSeadragon({
  id: "seadragon-viewer",
  tileSources: [{
		type: 'legacy-image-pyramid',
		levels:[{
      url: imagePrefix+'.4.jp2',
      height: 1080,
      width:  2048
  	},{
    	url: imagePrefix+'.2.jp2',
      height: 2160,
      width:  4096
  	},{
			 url: imagePrefix+'.jp2',
       height: 4320,
       width:  8192   
		}]
  }],
  showNavigator: false,
  showSequenceControl: false,
  sequenceControlAnchor: false,
  showNavigationControl: true,
  showZoomControl: false,
  showHomeControl: false,
  showFullPageControl: true,
  panHorizontal: true,
  panVertical: true,
  constrainDuringPan: true,
  wrapHorizontal: false,
  wrapVertical: false,
  visibilityRatio: 0.95,
  defaultZoomLevel: 0,
  minZoomImageRatio: 0.98,
  maxZoomPixelRatio:1,
  pixelsPerArrowPress:400,
  zoomPerScroll:1.3
  
});