An open-source, web-based viewer for zoomable images, implemented in pure JavaScript.
Hello guys, I'm a little confused with fitBounds(), although I read the Viewport coordinates docs and already searched on Gitter. I have this code below, and I don't know what should be the values for width and height when creating the rectangle that will be used as an argument for fitBounds().
// DZI - Image size W: 10709 H: 3850 - TileSize: 256
// Example Image Coords x: 5355.04 y: 1923.38
const imageCoords = tileToImageCoords(selectedToken.x, selectedToken.y); // Return the image coordinates
const tiledImage = viewer.current.world.getItemAt(0);
// $.Point {x: 0.5001400691007564, y: 0.18003548417219162}
const viewportCoord = tiledImage.imageToViewportCoordinates(
imageCoords.x,
imageCoords.y
);
const rect = new OpenSeaDragon.Rect(
viewportCoord.x,
viewportCoord.y
// width?
// height?
);
viewer.current.viewport.fitBounds(rect);
@ricp , you might be able to use the imageToViewportRectangle() function instead of
imageToViewportCoordinates() to get the OSD Rect. You can pass this to fitBounds directly instead of instantiating your own Rect. imageToViewportRectangle() uses image coordinates, so might be easier to handle.
Hello everyone, I'm considering using openseadragon in a project, but I have a setup problem with react, the viewer is shown twice on the page and I don't see my mistake. Maybe you can tell my where I went wrong:
import OpenSeaDragon from "openseadragon";
import React, { useEffect, useState } from "react";
const OpenSeaDragonViewer = ({ image_url }) => {
const [viewer, setViewer] = useState( null);
const InitOpenseadragon = () => {
viewer && viewer.destroy();
setViewer(
OpenSeaDragon({
tileSources: {
type: "image",
url: image_url ,
},
id: "openSeaDragon",
prefixUrl: "https://cdn.jsdelivr.net/npm/openseadragon@2.4/build/openseadragon/images/",
animationTime: 0.5,
blendTime: 0.1,
constrainDuringPan: true,
maxZoomPixelRatio: 2,
minZoomLevel: 1,
visibilityRatio: 1,
zoomPerScroll: 2
})
);
};
useEffect(() => {
InitOpenseadragon();
return () => {
viewer && viewer.destroy();
};
}, []);
return (
<div
id="openSeaDragon"
style={{
height: "600px",
width: "800px"
}}
>
</div>
);
};
export { OpenSeaDragonViewer };
2 replies
@mdklause The code looks pretty good to me. The one thing I am seeing is that the
return in your useEffect is creating a closure that will keep hold of the original value of viewer from before it was created. For that reason, I doubt it's getting destroyed. Instead of having viewer be state, you could have it be a local variable to the useEffect, and then it should be the correct thing for the cleanup function.
that's the error I get
tiledimage.js:1949 TypeError: this.imageToViewportCoordinates is not a function
at tiledimage.js:1938:30
at Array.map (<anonymous>)
at tiledimage.js:1936:36
at Array.map (<anonymous>)
at y.TiledImage._drawTiles (tiledimage.js:1935:55)
at y.TiledImage._updateViewport (tiledimage.js:1185:14)
at y.TiledImage.draw (tiledimage.js:317:18)
at g.World.draw (world.js:260:28)
at viewer.js:3591:18
at viewer.js:3543:9
the example on OSD site actually replicates the problem
in tiledimage.js
if (tiledImage._croppingPolygons) {
tiledImage._drawer.saveContext(useSketch);
try {
var polygons = tiledImage._croppingPolygons.map(function (polygon) {
return polygon.map(function (coord) {
var point = tiledImage
.imageToViewportCoordinates(coord.x, coord.y, true)
.rotate(-tiledImage.getRotation(true), tiledImage._getRotationPoint(true));
var clipPoint = tiledImage._drawer.viewportCoordToDrawerCoord(point);
if (sketchScale) {
clipPoint = clipPoint.times(sketchScale);
}
return clipPoint;
});
});
tiledImage._drawer.clipWithPolygons(polygons, useSketch);
} catch (e) {
$.console.error(e);
}
usedClip = true;
}this inside the map function is not referred to tiledImage anymore. It can be fixed with using selfif (this._croppingPolygons) {
var self = this;
this._drawer.saveContext(useSketch);
try {
var polygons = this._croppingPolygons.map(function (polygon) {
return polygon.map(function (coord) {
var point = self
.imageToViewportCoordinates(coord.x, coord.y, true)
.rotate(-self.getRotation(true), self._getRotationPoint(true));
var clipPoint = self._drawer.viewportCoordToDrawerCoord(point);
if (sketchScale) {
clipPoint = clipPoint.times(sketchScale);
}
return clipPoint;
});
});
this._drawer.clipWithPolygons(polygons, useSketch);
} catch (e) {
$.console.error(e);
}
usedClip = true;
}
if it looks ok, I can submit PR
And yes, we're not using arrow functions (or any ES6 stuff).
I believe it was from openseadragon/openseadragon#2134... While reviewing it, I didn't think about closures! If you're feeling up to it, it might be worth a scan through the changes there to see if you can spot any other places where this issue might have popped up.
regarding #2115: I was looking through the code and found this
* @class IIIFTileSource
* @classdesc A client implementation of the International Image Interoperability Framework
* Format: Image API 1.0 - 2.1
*
* @memberof OpenSeadragon
* @extends OpenSeadragon.TileSource
* @see http://iiif.io/api/image/
* @param {String} [options.tileFormat='jpg']it seems that the problem is actually solved long ago. The only thing: how to add this option to IIIF tile source? I usually just pass url to iiif info.json as tileSource
@altert It seems like it's okay if it takes a little more work to specify such things, if you ask me. At the least, is it even possible? Seems like it is, but only if you specify the full tileSource, and not just passing a URL? The problem is that if you do that, you have to get the info.json yourself and parse it yourself before passing it in as a tileSource, right? It does seem like it would be nice if we had a mechanism to say "go grab the info.json and parse it for us, but then let us add something to the result".
Do I have the basic problem understood?
1 reply
BTW, probably would be good to continue this conversation in #2115 so everyone can see.
Hello everyone!
I'm using OSD version 3.1 to display DZI -http://schemas.microsoft.com/deepzoom/2008 and I need to tell what tile is currently at a given position (e.g. where i just clicked). According to the documentation, I can't use getTileUrl here, and all my other attempts to determine exactly what tile I am clicking on have failed. Do you have any ideas on how to achieve this or approach this problem?
I'm using OSD version 3.1 to display DZI -http://schemas.microsoft.com/deepzoom/2008 and I need to tell what tile is currently at a given position (e.g. where i just clicked). According to the documentation, I can't use getTileUrl here, and all my other attempts to determine exactly what tile I am clicking on have failed. Do you have any ideas on how to achieve this or approach this problem?
I realize my solution is fairly convoluted and there’s probably a better way to do it, but here’s how I did it a while ago @ClassicTypeError404:
viewer.addHandler("canvas-click", (e) => {
// Get the tiled image from the world. Replace the 0 with a different index if your image is elsewhere in the OSD World.
const tiledImage = viewer.world.getItemAt(0)
// Find tiles containing the clicked point from among the last drawn tiles.
const tilesClicked = tiledImage.lastDrawn.filter((tile) => tile.bounds.containsPoint(e.position))
// Of the tiles that contain the point, find the one at the highest level, i.e., the smallest tile
const smallestTileClicked = tilesClicked.reduce((minTile, tile) => tile.level > minTile.level ? tile : minTile, {
level: 0
})
})
The
viewer.getTileBounds method seems like it could be much better suited for this, but I’m unsure how to get the current level of the Viewer to pass to it. Maybe keep track using the update-level event? Or perhaps there’s a direct method to get the level from the Viewport zoom?
@ClassicTypeError404 See the answer from @PrafulB above. Also, I always ask people why they want to know the actual tile? Usually it means they are trying to get some other information that would be better served by some other route.
OpenSeadragon works really hard to make it so you never have to think about tiles!
That said, people do ask for this. Maybe we should add a function based on @PrafulB's implementation?
@iangilman thanks! In my case, I wanted to allow annotation without the user having to draw on the canvas. Just clicking at the point of interest in the image would highlight the underlying tile. Instead of freeform annotation which would require downstream preprocessing, I would get a dataset of annotated regions all of the same size, making my job a little easier. Not the most standard of use cases though I’ll admit 😬
That said, people do ask for this. Maybe we should add a function based on @PrafulB's implementation?
Before you do that, there’s a pretty big problem with my solution. It can only be used after the tiles have all been fully rendered in at that level. Since a tile is only added to lastDrawn after it is actually drawn, calling the function immediately after a pan/zoom can return the wrong tile (or at least a tile at the wrong level).
@iangilman Yes, that’s why I felt that the
getTileBounds method on TiledImage was close to the desired functionality, though I haven’t used it so not entirely sure. In this context, would it also make sense to expose a method to get all the rendered levels at the current magnification? You could then use its output to pass to the new getTile method.
@PrafulB Yeah, I suppose we could use
getTileBounds to look through all the possibilities (for matching up with an x/y)... Not necessarily as efficient as calculating it directly, but with the advantage of using the same code we already have in place (so we know it's correct). I don't expect this is a function that would need to be called all the time, so it doesn't need to be super optimized.
As for making a function to expose all the rendered levels, I guess it just depends on whether that's a useful scenario. I don't think we should be adding functions just because we can. Every new function creates more complexity and maintenance needs.
I guess one question is whether we care if a level is rendered or not. Maybe we just get the info as needed and the new
getTile is called for a specific level.
by using opensaedragon we can annotate on PDF?
i have to create 1 feature in which i need to annotate on PDF
document
@coderishu OSD doesn't have support for loading PDFs directly. You could convert a PDF into a format that OSD uses, like DZI, and then it would work. Doing so would turn all of the text in the PDF into image data, so you wouldn't be able to select the text, if that's a concern.
format
@coderishu I don't know if there are any tools that go straight from PDF to DZI, but you can poke around at the options here: https://openseadragon.github.io/examples/creating-zooming-images/
Otherwise, what you would want to do is convert the PDF to an image and then convert that image to DZI.
My favorite converter for images to DZI is VIPS, but you can see there are a lot of options.
That said, you might consider whether you would be better served with a PDF library, and skipping OSD entirely. Perhaps there is a PDF library that supports zooming and overlays?