Annotating pdf.js

[María Teresa Chávez]

Hello,

My name is Maria Chavez, I am a 16 year old aspiring programmer from Guatemala. I am new to js and pdfjs and trying to work on a pdf.js project. The project is the following:

1. Enter Link

This page should just have a text box and a submit button called "View". Upon entering a link to a pdf into the text box and clicking the "View" button, we move to (2).

2. View Paper

Embed the PDF using pdf.js. It also overlays some annotations. The annotations follow a simple JSON format with three fields:

{
"anchor": "some text to anchor to",
"text": "the annotation text",
"type": "flag"
}
Anchor is the text used to position the annotation, text is some text to show, and type is the kind of annotation. Display the annotations on top of the pdf. There should be an "Add Annotation" button, which lets users add annotations to selected text.

I already did step 1 and embedded the pdf using pdf.js but I have basically no idea about how to do the annotations (I am assuming I'll have to use a div element based on the text selection example but other than that have no idea what to do). I was wondering if you could give me any more guidance as to how to do this.

Best,
Maria

[b...@magazooms.com]

As far as I know there are no methods builtin to add annotations on the fly - I create an annotation layer div with the same dimensions over the pdf canvas and place the annotations on this.

[mad....@gmail.com]

You can try using annotator.js for annotating the pdf. http://annotatorjs.org/

[Brian Moran]

As of a couple of months ago, annotatorjs.org didn't work with pdf.js.
Looking on their page, pdf.js is not listed in the 'using it' list. Do you
have any information that suggests that annotator.js works with pdf.js?

On Mon, Sep 22, 2014 at 9:22 AM, <mad....@gmail.com> wrote:

> You can try using annotator.js for annotating the pdf.
> http://annotatorjs.org/

> _______________________________________________
> dev-pdf-js mailing list
> dev-p...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-pdf-js
>



--
e: bmo...@onehub.com
p: +1 206 390 4376

Onehub, Inc.
www.onehub.com

[Randall Leeds]

We use annotatorjs in the hypothesis project for PDF annotation.
Documentation is sparse, but we have a fork at hypothesis/annotator on
github, the latest work is on "typed-packaging" branch (not a great name).

If there's interest, I'd be glad to help the community start to pull apart
the spaghetti a bit more and get it working better.

If Annotator can be of any assistance to PDF.js for creating annotations,
that'd be wonderful. Nick Stenning is about to try to wrap up some most of
Annotator 2.0 in the next month or so, which includes making the core
available for use as more of a library than an application. At that point,
I'd really love to put together a bridge between PDF annotations exposed by
PDF.js and Annotator.

Because it's great if Annotator "works" on a PDF, but much better if we can
actually integrate sensibly.

Anyway, feel free to bring it up on the Annotator list or IRC, and know
that we're following along here, too.

[vivek madkaikar]

Hi Brian,

I have used annotation.js with PDF.js and it works. I have integrated
annotation.js with the PDF viewer(
http://mozilla.github.io/pdf.js/web/viewer.html ). There are some issues
like the PDF viewer won't render all the pages in one go but loads it as
user scroll to that page. So I had to hook up rendering of annotation when
the page is loaded.

Thanks,
Vivek

[rishi....@gmail.com]

Hey Vivek,

I'm trying to do the same. But I'm not able to re-render annotations on scroll, can you help me out? How did you handle that?

-Rishi Yadav

[hag...@gmail.com]

Can you possibly share code snippets of how this is done please?

[Chester Goking]

it is best to create your own canvas on top of the pdf js canvas layer and create your annotations there.

annotator.js is a hassle unlike when you make your own shapes and icons in the canvas

google how to create shapes in canvas, there are a ton of them with working samples. all you need to do then is modify it according to your requirements

im currently making an article on how i did it ill post it here soon

[Chester Goking]

ill post the link when im done im currently composing an article on how to create annotations in pdf.js

just a guide of course not the source code :D

but there are tons in google you can find how to create shapes in a canvas

[dav...@gmail.com]

[Randall Leeds]

Just wanted to chime in as one of the Annotator maintainers.

We've been working on Annotator 2 for a while, in fits and starts, but
we're going to have a conversation about scoping the release sometime
within the month with an eye toward identifying and eliminating superfluous
things that we iterate on after 2.0 comes out.

However, one thing that is done already is a separation of the highlighter
into a plugin. Nick Stenning, one of the other maintainers, has also
started experimenting with an SVG-layer based approach to arbitrary text
overlays called "marks". It's very early and I hope I'm not putting him on
the spot to share it at this point. You can find that here:
https://github.com/nickstenning/marks

i fully expect that marks or something like it will replace the default
highlighter in Annotator. If there's anything we can do to collaborate with
PDF.js to help make your annotation story easier, please stay in touch.
Nick and I both work at Hypothesis (https://hypothesis) and we've done some
serious twisting around Annotator to get something that works on top of
PDF.js, but we can and should create a much better story for the
interaction here.

Personally, I would like to see us tapping into annotation APIs in PDF.js
to surface out-of-band annotations from our network so that PDF.js can
handle the display.

If Annotator or, more likely, some smaller component like marks can help
with the display layer, I'd be thrilled. That would be a sensible
composition of components to me.

On Tue, Mar 10, 2015 at 10:41 PM, <dav...@gmail.com> wrote:

> On Wednesday, September 24, 2014 at 7:19:39 AM UTC+5:30, vivek madkaikar
> wrote:

[Kristof Csillag]

Hi all,

I am another one of Hypothesis (https://hypothesis) devs.
I would just like to mention that besides working on nice things for
the future,
we also have an already working integration between Hypothes.is and
PDF.js.

You can host/run the whole thing yourselves, or you can simply use our
service.
To check it out, you need to add a single line of code the PDF.js
viewer HTML file:

After referencing debugger.js and viewer.js, around here, add a script
tag with this URL:

http://hypothes.is/embed.js

This will (crudely) integrate the Hypothes.is annotator agent to the
PDF.js viewer.

(Should work at least in FF and Chrome.)

There are a few challanges and limitations, but basically, it should
work.

Kristof


2015. márc. 21., szo 2.51-kor-kor, Randall Leeds <til...@hypothes.is>
írta:

[chit...@gmail.com]

here are a few tips on how to start making your way around adding annotations to PDF.JS

http://tech.chitgoks.com/2015/03/30/how-to-create-annotations-in-pdf-js/

[mut...@gmail.com]

Hi Vivek,

Please guide me setting up Annotations for PDF.js

Thanks,
Muthu

[Apurva Jalit]

Hi vivek,
Can you please share how you achieved integration of annotator with pdf.js or may be your experience as to what approach worked well and what did not?

Thanks,
Apurva

On Wednesday, September 24, 2014 at 7:19:39 AM UTC+5:30, vivek madkaikar wrote:

[mathias...@gmail.com]

Hi Apurva,

do you still need help with the integration of Annotator and PdfJs? I have just completed the integration as well, actually experienced similar issues like Vivek (PdfJs not loading all pages at once) but figured out a way to solve it.
Ping me if you still need help with it.

Mathias

[julios...@gmail.com]

Hello Mathias Lin, I need this. Can you help me with?

[julios...@gmail.com]

Hello Mathias, can you help me with this integration?

Em sábado, 13 de junho de 2015 13:53:24 UTC-3, Mathias Lin escreveu: