annotorious
How To Display annotation on Image which is come from database table?
I guess you are referring to the annotations being stored in a backend? Annotorious doesn't do any server communication or persistence for you. You need to write your own AJAX code to fetch data from your database, and then use the API to add existing annotations or to push newly created ones to your backend.
The beginnings of a generic REST storage plugin which could be of help are available here:
https://github.com/annotorious/annotorious-vanilla-rest-plugin
Hello rsimon, Thank you for the reply. I want to ask one more question on this issue. i have get json data from db using ajax call and now i want to display annoted image on web page so how can i achieve this. for more understanding refer below code
var annotation = $.parseJSON($("#hdnno").val()); for (var i = 0; i < annotation.length; i++) { if (annotation[i] != undefined) { if (!annotation[i].shape) { anno.addAnnotation(annotation); } } }
now i want to add this annoted data to my image tag but its not working. i have gone thorugh this and found that problem in below line anno.addAnnotation(annotation); here addAnnotation is accepting one argument and that is wrong because addAnnotation take two arguments like as anno.addAnnotation(a,b); so i don't know which parameter is used in this addAnnotation.
once again thank you for reply. How I can match url with src attribute because my image is also comes from database?
i think more clarity required from my side.
Steps: 1)take one image tag and set image src="static image" and id="imgid" and set class="annotatable"
2)add one button say save annotation
3)now just add some annotation on that image
4)Save annotation on database table
5)now get that annotation on the same image so i have take annotation value on hdn field and take value of that hdn field in var annotation by writing below line
var annotation = $.parseJSON($("#hdnno").val());
6)var annotation have proper json data
7)now just want to add annotation on the image(same above static image). annotation datat is in var annotation. so can u help me?
var annotation = $.parseJSON($("#hdnno").val()); for (var i = 0; i < annotation.length; i++) { if (annotation[i] != undefined) { anno.addAnnotation(annotation); } } i have taken img tag in page
It doesn't matter if your image is from a database. It should still have an src attribute. Check if the src attribute of the image matches up with the src field in the annotation. If your image uses a data URL (and really doesn't have an src) you can give it a "dummy SRC" by adding a "data-original" attribute:
<img data-original="http://www.example.com/my-dummy-image-path">
Annotorious will then use this path instead. I.e. if the annotation JSON has http://www.example.com/my-dummy-image-path in it's src field, it will match.
Hello! Please I would like to save annotations in Mysql database using annotorious-vanilla-rest-plugin but JSON/REST is new for me. I don't know how and where to call the annotorious-vanilla-rest-plugin for do this. Please help
Hello rsimon,
Thank you for data-original idea. It solved two of my issues at one shot. As I am using data URI, so I was not interested to save all that long data URI on the database. It means saving a copy of the image on database for each annotations. Your data-original solution is awesome. Also, when I was saving data URI on the database, it was not displaying the annotations when it loads. After using data-original, it solved the issue.
I think there is a deficiency of good documentation for this plugin. I am planning to write some tutorials on this weekend, if I get some time.
Hi Debiprasad,
<I think there is a deficiency of good documentation for this plugin. I am planning to write some tutorials on this weekend, if I get some time.>
This would be absolutely amazing! Indeed there's a need for more documentation & examples - do let me know when you write something & many thanks in advance!
Cheers, R
Looks good overall. But you may be calling setAnnotations() before Annotorious has loaded. Try changing
$(function () {
setAnnotations();
});
to
$(document).ready(function() {
setAnnotations();
});
(and move the script block to the end of the body).
This should ensure that setAnnotations is called after everything has loaded.
Cheers, R