使用 OpenSeadragon，如何设置它以在左上角的一组特定坐标处加载图像？答案

【问题标题】：Using OpenSeadragon, how can set it to load the image at a specific set of coordinates in the upper left corner?使用 OpenSeadragon，如何设置它以在左上角的一组特定坐标处加载图像？
【发布时间】：2020-07-22 14:52:11
【问题描述】：

我正在使用 OpenSeadragon 显示一个大图像，以便它像马赛克一样无限滚动。这工作正常，代码如下。但是，在 Chrome、Firefox 或 Opera 中打开时，初始缩放级别会有所不同，并且图像从图像中的随机位置显示，而不是在左上角具有所需的坐标。

两个相关问题：

是否需要设置属性来指定图像首次加载时应显示在左上角的坐标？
第一次加载图像时是否有指定缩放级别的属性？我将 defaultZoomLevel 设置为 0.6，但每个浏览器似乎对它的反应不同，只有 Chrome 是正确的，而另外两个显示的是放大得多的图像。

感谢您的帮助！

<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>

【问题讨论】：

标签： openseadragon

【解决方案1】：

是的，OpenSeadragon 中的缩放级别与视口的宽度相关（缩放 1 表示图像完全按宽度方向填充视口），这可能就是您在不同设备上获得不同结果的原因。如果要选择图像的特定部分，则必须将图像坐标转换为视口坐标。无论哪种方式，获得可靠结果的最佳选择是在图像加载后明确选择位置。例如：

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);
});

【讨论】：