使用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 中打开时,初始缩放级别会有所不同,并且图像会从图像中的随机位置显示,而不是在左上角显示所需的坐标。
两个相关问题:
是否有设置属性来指定第一次加载图片时应显示在左上角的坐标?
是否有一个属性来指定首次加载图像时的缩放级别?我将 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);
});
我正在使用 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 意味着图像在宽度方向上正好填满视口),这可能就是为什么您在不同的平台上得到不同结果的原因设备。如果要选择图像的特定部分,则必须将图像坐标转换为视口坐标。无论哪种方式,获得可靠结果的最佳选择是在图像加载后明确选择位置。例如:
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);
});