JavaScript — Добавить аннотацию к Openseadragon

Question

JavaScript — Добавить аннотацию к 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). Возвращаемые данные верны, но я не смог нарисовать аннотацию на изображении jpeg2000, используя anno.addAnnotationкак я могу это нарисовать?

Ссылка: Добавить аннотации API.

14

javascript jquery openseadragon php

Решение

Другие решения

Поскольку вы не поделились своим кодом, я попытался настроить его здесь: 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,
});

-1

Источник

Accepted Answer

Вам не хватает src приписывать anno.addAnnotation метод, дело в том, что я действительно не знаю, какое значение должно идти туда, в документации нет ничего об этом, единственное, что я мог найти в интернете, это плагин:

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';
}

так что будьте уверены, что это может измениться в будущем.

2