Openseadragon image cordinates

Question

iam doing a project using openseadragon check out the below example. a samle openseadragon image

In the Onclick method want to find the cordinates(px,py) of the image.Is there any method?? please help this is ma first openseadragon project.

thanks

iangilman · Accepted Answer · 2015-12-04T17:05:42.563

5

When you get a click, it'll be in window pixel coordinates. You can then translate it into viewport coordinates (which go from 0.0 on the left to 1.0 on the right). You can then translate those into image coordinates. Here's how it would look all together:

viewer.addHandler('canvas-click', function(event) {
  var viewportPoint = viewer.viewport.pointFromPixel(event.position);
  var imagePoint = viewer.viewport.viewportToImageCoordinates(viewportPoint.x, viewportPoint.y);
  console.log(imagePoint.x, imagePoint.y);
});

For more info on the coordinate systems, see: http://openseadragon.github.io/examples/viewport-coordinates/

edited Dec 04 '15 at 17:05

answered Aug 26 '13 at 18:05

iangilman

2,144
1
13
16

I realize that this is a rather old thread, but I have a similar problem, now. Your code above leaves me with an "info is undefined" Type error in OpenSeadragon 2.0.0. Could you update your answer, plz? – some-non-descript-user Dec 03 '15 at 15:23
Thanks for the heads up! Updated code for OpenSeadragon 2.1.0, and updated coordinate system info link. – iangilman Dec 04 '15 at 17:06

score 1 · Answer 2 · answered Dec 04 '15 at 07:53

The following code, adapted from @iangilman's answer, worked for me with OpenSeadragon 2.0.0. It seems that the second argument of the handler function got removed in more recent versions. I added the quick === true condition to keep it from firing on a drag start. It might also be a good idea to switch of the default single-click-to-zoom behaviour in the gestureSettingsMouse object.

viewer = OpenSeadragon({
    id: "osd1",
    prefixUrl: "/path/to/seadragon/images/",
    tileSources: "/path/to/tif/images/image.tif.dzi",
    showNavigator:  true,
    gestureSettingsMouse: {
        clickToZoom: false,
        dblClickToZoom: true
    }
});
viewer.addHandler('canvas-click', function(target) {
    if(target.quick === true){
        var viewportPoint = viewer.viewport.pointFromPixel(target.position);
        var imagePoint = viewer.viewport.viewportToImageCoordinates(viewportPoint.x, viewportPoint.y);
            console.log(parseInt(imagePoint.x), parseInt(imagePoint.y));
        }
});

Openseadragon image cordinates

2 Answers2

Linked