Définir une zone sur une image

Bonjour, nous souhaiterions ajouter une fonctionnalité à une application php existante.
Le but est qu'un utilisateur définisse une zone sur une image, puis indique une donnée dans un formulaire et que le tout s'enregistre en base de donnée.
Je met les 4 étapes simulant les actions de l'utilisateur.
Il faudrait utiliser javascript avec jquery.

Attention, l'image afficher est très grande. Pour une meilleur ergonomie, l'image est affiché 2 fois plus petite. Il faut prendre en compte cette donnée pour le calcul de la zone. Nous utilisons déjà le script jquery Jcrop pour du recadrage d'image.

Une fois la zone défini, l'utilisateur peut l'ajuster et s'il clique dessus un pop-up en javascript apparaît.
Là, il y a un formulaire avec une donnée à saisir.

Dès qu'il valide, 6 données sont enregistrés dans une base (voir un extrait de la base en image) : le numéro de page (donnée issu de l'url defined.php?page_number=4) + la position x et y de la zone + la largeur et hauteur de la zone + la donnée saisi dans le formulaire.

Pour l'enregistrement des données, deux choix possibles : soit direct dès la sélection de la zone et la saisi de la donnée soit à la fin de toutes les sélections

Le projet s’arrête là.

Dans un second temps, il faudra prévoir la possibilité de modifier une zone ou de modifier la donnée saisi puis la suppression d'une zone.