将注释添加到 Openseadragon
Add Annotation to Openseadragon
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。
您在anno.addAnnotation
方法中缺少src
属性,问题是我真的不知道应该在那里使用什么值,文档中没有任何内容,我在互联网上唯一能找到的就是这个插件:
https://github.com/dgutman/OpenSeadragon-Plugins/tree/master/annotationState_Code
你可以试试。
编辑
我实际上设法在演示页面上以编程方式附加事件,那里的公海龙模块已注册为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';
}
因此,请放心,这将来可能会改变。
由于您没有共享代码,因此我尝试在此处进行设置: https://jsfiddle.net/peLokacs/3/,请进行必要的更改,以便我可以看到注释。我还收到"Annotorious 在当前版本或构建配置中不支持此媒体类型"错误,如果您设法保存了注释,那么您可能也知道如何解决这个问题。
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,
});
- 正在添加'X'按钮,在文本字段旁边使用javascript
- 如何在映射数组中添加换行符
- 正在将数据主题添加到所有项目
- ZeroClipboard-在复制之前添加到值
- 我可以在json对象中添加一个函数吗
- 将输入字段中的文本提交到我的数据库,同时将其添加到我的列表中
- 正在SharePoint 2013母版页中添加JQuery移动文件
- 如何添加浮动和非浮动,其他
- 添加文字和评论功能更新Div
- 如果使用 lodash 将属性存在于另一个对象中,则向对象添加属性
- 动态地改变“”的URL;添加新项目”;链接使用javascript/jquery
- 在函数中添加数组元素的数值
- 如何将歌曲添加到jPlayer
- 在html Select中添加搜索
- Java脚本时间添加
- FabricJs-限制主对象内添加对象的移动区域
- JQuery添加元素需要在我的js之前再次添加JQuery脚本
- 如何在Google柱状图中动态添加行/列
- 正在尝试使用if和else添加类,但无法正常工作
- 将注释添加到 Openseadragon