openannotation / annotator

Annotation tools for the web. Select text, images, or (nearly) anything else, and add your notes.
http://annotatorjs.org
Other
2.69k stars 532 forks source link

Does not display annotations in a pdf document. #712

Open Kyython opened 4 years ago

Kyython commented 4 years ago

I use a pdf.js for displaying a pdf document. I needed to create annotations in this document, so I used your library of the latest version to implement my task.

I came across a problem that when there is a request to get annotations, they are not shown in the document. There are no errors or warnings. The incoming Json matches the one specified in the documentation. I do everything as specified in your documentation, but I can't understand what the problem is.

This is my connection script

<script>
    var pageUri = function () {
      return {
        beforeAnnotationCreated: function (ann) {
          ann.uri = window.location.href;
        }
      };
    };

    var app = new annotator.App()
      .include(annotator.ui.main, {
        viewerExtensions: [
          annotatormeltdown.viewerExtension
        ],
        editorExtensions: [
          annotatormeltdown.getEditorExtension({ min_width: '200px' })
        ]
      })
      .include(annotator.storage.http, {
        prefix: 'http://localhost/api/annotator'
      })
      .include(pageUri);

    app.start()
      .then(function () {
        app.annotations.load({ uri: window.location.href });
      });

  </script>

This is my json that comes with a get query search

{
  "id": "ad8415fd-b40b-48c9-a2a9-6ad1a2728b59",
  "text": "text",                  
  "quote": "someone text",   
  "uri": "http://localhost...",        
  "ranges": [                               
    {
      "start":"/div[4]/div[2]/div[4]/div[1]/div[1]/div[2]/div[1]",
      "end":"/div[4]/div[2]/div[4]/div[1]/div[1]/div[2]/div[1]",   
      "startOffset": 0,                
      "endOffset": 120
    }
  ]
}

Any help would be welcome, thank you.

zahqresh commented 4 years ago

Exactly same problem im facing using it with pdf.js

zahqresh commented 4 years ago

I solved this issue, so you have to put this inside the promise when it renders the text layers thats when it should initialize the annotatorjs and fetch the annotation data and annotations will be shown while there is a gotcha if you are using or rendering multiple pages at the same time you have to somehow render the annotations when the last text layer is rendered and thats how annotations will be loaded when your document gets loaded. Hope this will help.