Anmerkung hinzufügen zu 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); 
     } 
    } 
}); 

I Live Anmerkung hinzufügen: http://annotorious.github.io/demos/openseadragon-preview.html

Nach Benutzer die Anmerkung hinzugefügt, die ich in meiner Datenbank speichern. Wenn der Benutzer die Seite aktualisiert, lade ich gespeicherte Daten aus der Datenbank mit einem Ajax-Aufruf (H_AnnotationHandler.php). Das Zurückgeben von Daten ist richtig, aber ich konnte keine Annotation auf JPEG2000 Bild mit anno.addAnnotation zeichnen, wie kann ich es zeichnen?

Referenz: Hinzufügen von Anmerkungen API.

Answer 1

Sie fehlen src Attribut in anno.addAnnotation Methode, die Sache ist, dass ich nicht wirklich wissen, welchen Wert es gehen sollte, gibt es nichts in der Dokumentation über das, das einzige, was ich in Internet finden konnten, ist dieses Plugin:

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

Sie könnten das stattdessen versuchen.

EDIT

ich es tatsächlich geschafft, Veranstaltung programmatisch auf der Demo-Seite, das offene Meer Drachen-Modul befestigen dort als dzi://openseadragon/something registriert ist, dies zu wissen, die Funktion

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 } 
    }] 
}); 

von der Konsole aufrufen kann (oder in Ihrem Code innerhalb der Ajax-Erfolgsschleife) und es wird dem Bild hinzugefügt. Dennoch ist die Benennungsmethode recht ... na ja, ich fand diese im Quellcode:

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

so sicher sein, dass dies in Zukunft ändern könnte.

Answer 2

Da Sie Ihren Code nicht geteilt haben, habe ich versucht, ihn hier einzurichten: https://jsfiddle.net/peLokacs/3/, bitte machen Sie die notwendigen Änderungen, damit ich die Anmerkungen sehen kann. Auch bekomme ich eine "Annotorious unterstützt diesen Medientyp in der aktuellen Version oder Build-Konfiguration nicht." Fehler, Wenn Sie die Anmerkungen gespeichert haben, wissen Sie wahrscheinlich auch, wie Sie das beheben können.

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, 
});