为 Openseadragon 添加注解

Question

var viewer = OpenSeadragon({
    id: "openseadragon1",
    prefixUrl: "images/openseadragon/",
    showNavigator:  true,
    navigatorPosition:   "BOTTOM_RIGHT",
    tileSources: '/fcgi-bin/iipsrv.fcgi?Deepzoom=<?=$plink?>.jp2.dzi',
    crossOriginPolicy: 'Anonymous',
    zoomInButton:   "zoom-in",
    zoomOutButton:  "zoom-out",
    homeButton:     "home",
    fullPageButton: "full-page"
});

anno.makeAnnotatable(viewer);

$.ajax({
    url: "handlers/H_AnnotationHandler.php",
    data: "case_id=<?=$case_id?>&plink=<?=$plink?>&mode=get",
    type: "post",
    dataType: "json",
    success: function(response) {
        if (!response.error) {
            for (var i=0; i<response.annots.length; i++) {
                console.log(response.annots[i].comment);
                anno.addAnnotation({
                    text: response.annots[i].comment,
                    shapes: [{
                        type: 'rect',
                        geometry: {
                            x: response.annots[i].rect_x,
                            y: response.annots[i].rect_y,
                            width: response.annots[i].rect_w,
                            height: response.annots[i].rect_h
                        }
                    }]
                });
            }
        } else {
            console.log(response.error);
        }
    }
});

我可以实时添加注释：http://annotorious.github.io/demos/openseadragon-preview.html

用户添加注释后，我存储在我的数据库中。当用户刷新页面时，我使用 ajax 调用 (H_AnnotationHandler.php) 从数据库加载保存的数据。返回数据是真的，但是我无法使用 anno.addAnnotation 在 jpeg2000 图像上绘制注释，我该如何绘制它？

参考：添加注释API。

Answer 1

你在 anno.addAnnotation 方法中缺少 src 属性，问题是我真的不知道那里应该有什么价值，文档中没有关于那个的任何内容，我唯一的事情在互联网上可以找到这个插件：

https://github.com/dgutman/OpenSeadragon-Plugins/tree/master/annotationState_Code

你可以试试。

编辑

我实际上设法在演示页面上以编程方式附加事件，那里的 open sea dragon 模块注册为 dzi://openseadragon/something，知道这一点你可以调用函数

anno.addAnnotation({
    src : 'dzi://openseadragon/something',
    text : 'My annotation',
    shapes : [{
        type : 'rect',
        geometry : { x : 0.8, y: 0.8, width : 0.2, height: 0.2 }
    }]
});

从控制台（或在 ajax-success 循环中的代码中），它将被添加到图像中。然而，命名方法是相当......好吧，我在源代码中找到了这个：

annotorious.mediatypes.openseadragon.OpenSeadragonModule.prototype.getItemURL = function(item) {
  // TODO implement something decent!
  return 'dzi://openseadragon/something';
}

所以请放心，这在未来可能会改变。

Answer 2

由于您没有共享您的代码，我尝试在此处进行设置：https://jsfiddle.net/peLokacs/3/，请进行必要的更改以便我可以看到注释。我还收到一个 "Annotorious does not support this media type in the current version or build configuration." 错误，如果您设法保存了注释，那么您可能也知道如何修复它。

var viewer = OpenSeadragon({
    id: "openseadragon-1",
    prefixUrl: "https://neswork.com/javascript/openseadragon-bin-2.1.0/images/",
    //tileSources: "https://openseadragon.github.io/example-images/highsmith/highsmith.dzi",
    tileSources: { type: 'legacy-image-pyramid', levels: [{ url: '0001q.jpg', height: 889, width:  600 }, { url: '0001r.jpg', height: 2201, width: 1485 }, { url: '0001v.jpg', height: 4402, width: 2970 }]},
    showNavigator: true,
});

为 Openseadragon 添加注解

Add Annotation to Openseadragon

javascript

php

jquery

openseadragon

编辑