How to add notes to the picture and save them to the database?

Question

JavaScript

I want to make my notes and comments in the book and write the answers. Books in pdf format.
I decided to translate the pdf page by page into pictures and then make notes on the picture itself.
Basically, these are textbooks where you need to enter something missing and sign.
Then another person (a teacher for example) looks at the assignment and checks it.
How to implement such that in a picture in a certain place to overlay a textbox with text and how is it logical to save it in the database?

Answer 1

1. Why store pictures in the database?
2. Perhaps it is worth keeping pictures and notes separately?
Let's say a mark can be displayed by overlaying a div c position: absolute; on top of the photo; Then in the database we store a link to the photo, the text of the note, the offset to the left and top in% of the photo size.
If there can be several marks on the picture, then two tables, and if you store a book, then 3 for example:
book: id | title | some_description | cover_image_url
page: id | book_id | image_url
info: id | page_id | text | left | top
the images themselves, of course, will not be in the database, only links to them or parts of links in the database (and if you name the images as /book_id/page_id.jpg, then you don’t need to store the url at all)

Answer 2

Horror. This is despite the fact that the PDF format itself supports all kinds of labels, and all kinds of text selection, and comments, and layers, and JavaScript to the heap.