使用OpenSeadragon,如何将其设置为在左上角的一组特定坐标处加载图像?

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

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

两个相关问题:

  1. 是否有设置属性来指定第一次加载图片时应显示在左上角的坐标?

  2. 是否有一个属性来指定首次加载图像时的缩放级别?我将 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 意味着图像在宽度方向上正好填满视口),这可能就是为什么您在不同的平台上得到不同结果的原因设备。如果要选择图像的特定部分,则必须将图像坐标转换为视口坐标。无论哪种方式,获得可靠结果的最佳选择是在图像加载后明确选择位置。例如:

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