Need Image Annotation back to image(load image) using base64 string

[kite57]

Hello, I am saving annotation into database with src attribute base64 string but i am not able to get image annotation.can any one help me...

[rsimon]

Hi,

the way it’s implemented right now, Annotorious uses the image SRC attribute as the main identifier to link annotations to images. I.e. an annotation will attach to an image, if the annotation's SRC property matches the image’s SRC attribute. Here’s a workaround if you have a base64 SRC:

• Add a "data-original" attribute to the tag
• Pick any kind of dummy URL for the value, e.g.
• After that, Annotrious will ignore the (base64) SRC, and use the value of data-original as the identifier. I.e any annotation you create will get this value for its SRC property; and, vice versa, any annotation with this SRC value you add through the API will attach to the image

I'm aware this still needs proper documenting... But at the moment I have next to no time to support Annotorious as much as I'd like to :-( Hope this helps!

Cheers, Rainer

---

Von: kite57 [mailto:notifications@github.com] Gesendet: Sonntag, 25. Jänner 2015 17:29 An: annotorious/annotorious Betreff: [annotorious] Need Image Annotation back to image(load image) using base64 string (#123)

Hello, I am saving annotation into database with src attribute base64 string but i am not able to get image annotation.can any one help me... — Reply to this email directly or view it on GitHub.

[kite57]

Yes that's true that data-original attribute override src attribute value but what to given in data-origin because my image is comes from map drive(e.g D:/Image/).and my annotation comes from database. so how i can get my image and annotation.

[rsimon]

I'm not sure I understand what your problem is.

• You know how to display the image on the Web page, correct?
• You know how to fetch the annotations from your database, and transfer them to the Web page, so that they exist as a JavaScript object there, right? (Either by fetching them as JSON or similar; or by rendering them directly into your page template in case you are using any sort of Web framework to produce your pages.)
• You know that you can add an annotion JS object using anno.addAnnotation(); right?

If all that is the case, the only thing you need to make sure is that the value of the src property of the annotation object matches the value of data-original attribute of the image tag. What exactly that value is, is not important, they just need to be the same. You can just make up a dummy URL.

[pobrob]

I tried that technique you suggested. If you add the data-original before you run makeAnnotatable, then it is not annotatable, however if you add the data-original after makeAnnotatable, then the system just uses the base-64 data as the source, and adding an annotation with the dummy URL does not work.

[bgth]

@pobrob you may try what is mentioned in #117 by @ravishivt and see if it works for you.