Search code examples
openseadragon

Using OpenSeadragon, how can set it to load the image at a specific set of coordinates in the upper left corner?

I am using OpenSeadragon to display a large image so that it scrolls infinitely as a mosaic. This is working fine, with the code listed below. However, the initial zoom level varies when opened in Chrome, Firefox or Opera, and the image is displayed from a random position within the image, instead of having the desired coordinates in the upper left corner.

Two related questions:

  1. Are there properties to be set to specify the coordinates of the image that should be displayed in the upper left corner when the image is first loaded?

  2. Is there a property to specify the zoom level when the image is first loaded? I set defaultZoomLevel to 0.6 but each browser seem to react differently to it, with Chrome being the only one to get it about right and the other two showing a much more zoomed out image.

Thanks for any help!

<body>
    <div id="openseadragon1" style="width: 6560px; height: 3801px;"></div>
    <script src="/openseadragon/openseadragon.min.js"></script>
    <script type="text/javascript">
    var viewer = OpenSeadragon({
        id: "openseadragon1",
        showNavigationControl: false, 
        wrapHorizontal:     true,
        wrapVertical:       true,
        visibilityRatio:    0,    
        zoomPerScroll:      1.2,  
        defaultZoomLevel:   0.6,  
        minZoomImageRatio:  0.6,  
        maxZoomPixelRatio:  2.5,  
        prefixUrl: "/openseadragon/images/",
        
        tileSources: {
            type: 'image',
            url:  '/myBigImage.png'
        }
    });

    // -------------------------------------
    // Edit based on iangilman's reply
    // -------------------------------------
    viewer.addHandler('open', function() {
    var tiledImage = viewer.world.getItemAt(0); 

    var imageRect = new OpenSeadragon.Rect(10, 50, 1000, 1000); 

    var viewportRect = tiledImage.imageToViewportRectangle(imageRect);
    viewer.viewport.fitBounds(viewportRect, true);
    });
</script>
</body>
Solution

  • Yes, the zoom levels in OpenSeadragon are relative to the width of the viewport (a zoom of 1 means the image is exactly filling the viewport width-wise), which is probably why you're getting different results on different devices. If you want to choose a specific portion of the image, you'll have to convert from image coordinates to viewport coordinates. Either way, your best bet for reliable results is to explicitly choose the location after the image loads. For example:

    viewer.addHandler('open', function() {
  // Assuming you are interested in the first image in the viewer (or you only have one image)
  var tiledImage = viewer.world.getItemAt(0); 
  
  var imageRect = new OpenSeadragon.Rect(0, 0, 1000, 1000); // Or whatever area you want to focus on
  
  var viewportRect = tiledImage.imageToViewportRectangle(imageRect);
  viewer.viewport.fitBounds(viewportRect, true);
});