Travailler sur une image

Fermé
tortue - Modifié le 2 mars 2020 à 15:40
 Tomatin - 3 mars 2020 à 20:21
Bonjour,

Dans le cadre de mon master, je cherche des API permettant de travailler sur une image importer sur mon site web. En effet, pour chaque image (insectes) je dois placer sur la photo importée sur ma page web différents points dont les coordonnées sont placés dans un autre fichier texte. Jusque ici, j'ai reussi à importer mon image, et également à afficher sur ma page les lignes du fichier correspondant aux coordonnées des points à placer.

En espérant m'être bien fait comprendre, je vous remercie



Configuration: Linux / Firefox 73.0
A voir également:

2 réponses

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
2 mars 2020 à 23:39
Bonjour,

En Javascript, la meilleur façon de travailler sur une image, c'est l'utilisation de canvas
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial

Tu trouveras de nombreux exemples sur le net à ce sujet.

PS: Le javascript (sauf avec Node.js) ne s'exécute que côté utilisateur. Si le fichier texte contenant les coordonnées se trouve sur le serveur qui héberge ton site, tu devras utiliser à minima un langage serveur (comme le php) et Ajax pour relier le JS à ce langage serveur.

0
Sinon en HTML avec CSS ce sont des simples superpositions(dessiner les points au dessus d'une image). Mais ça parait plus pratique avec CANVAS qui utilise un contexte de dessin 2D au lieu d'une balise pour les images et les points.
Enfin tout dépends de ce que vous voulez faire, le temps et compétences que vous avez.
La solution CSS est relativement simple car ne va faire appel qu'au CSS via z-index pour créer des annotations au dessus d'une image, avec CANVAS vous devez maîtriser l'API de dessin.
Les 2 peuvent s'automatiser facilement.

Si vous voulez une image avec des points réactifs(cliquable) il vous suffit d'utiliser area map qui est ne balise HTML permet d'indiquer des zones cliquables(rectangle, rond, polygone...) à des coordonnées limitées.
0