向Openseadragon添加注释
向Openseadragon添加注释
提问于 2016-01-15 10:07:52
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)从数据库加载保存的数据。返回数据是正确的，但我无法使用jpeg2000图像绘制anno.addAnnotation注释，如何绘制它？
参考:添加注释API。
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-01-25 15:07:22
在src方法中，您缺少了anno.addAnnotation属性，问题是我不知道应该使用什么值，文档中什么都没有，我在互联网上唯一能找到的就是这个插件：
你可以试试这个。
编辑
实际上，我通过编程将事件附加到演示页面上，那里的开放海龙模块注册为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';
}因此，请放心，这可能会改变在未来。
Stack Overflow用户
发布于 2016-01-25 15:16:29
由于您没有共享代码，所以我尝试在这里设置它：https://jsfiddle.net/peLokacs/3/，请执行必要的更改，这样我就可以看到注释了。我还得到了一个“在当前版本或构建配置中不支持此媒体类型”。错误，如果您成功地保存了注释，那么您可能也知道如何修复它。
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,
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34808659
复制相关文章
相似问题
腾讯云开发者
