PHP ou Javascript ou autre - Dessiner des formes simples sur des images?

Question

J'ai fondamentalement une image d'une carte du monde et je voudrais placer une image de broche à une coordonnée de pixel spécifiée sur cette image de carte du monde.

C'est pour un site web, donc idéalement la solution devrait être en PHP ou Javascript (j'évite Java et Flash car je veux qu'il soit le plus simple possible).

J'ai jeté un oeil à la bibliothèque processing.js mais il est bien trop gros pour cette tâche simple. Existe-t-il une fonction Javascript préexistante qui me permettra de faire cela? Ou une bibliothèque javascript plus simple que je peux utiliser? (processing.js était un peu trop avancé pour moi, je ne pouvais pas le faire travailler lol)

En termes d'une solution PHP, je préférerais prendre la charge du serveur et sur le client pour cette tâche, mais je voudrais aime toujours entendre les méthodes pour le faire en PHP si elles sont appropriées.

Merci!

Answer 1

la meilleure façon de le faire est de mettre l'image de la broche sur l'image de la carte et les mettre dans la position css comme ceci:

<div style="position:relative"> 
    <img src="map.png" style="position:absolute; top:0px; left:0px; z-index:0"/> 
    <img src="pin.png" style="position:absolute; top:50px; left:30px; z-index:1"/> 
</div> 

Answer 2

Je suggère d'utiliser l'extension GD Library pour PHP. De cela, vous pouvez manipuler des images et produire une nouvelle sortie. Ensuite, vous pouvez le mettre en cache quelque part et rediriger l'utilisateur, ou servir l'image en peaufinant les en-têtes de sortie et en écrivant les données binaires sur stdout.

header("Content-Type: image/jpeg"); 

Answer 3

Comme Aren l'a mentionné, GD est bon pour cela.

Cependant, une alternative à la bibliothèque GD est Imagemagick. Ce gentle introduction est très utile.

ImageMagick® est une suite logicielle permettant de créer, de modifier et de composer des images bitmap. Il peut lire, convertir et écrire des images dans une variété de formats (plus de 100), y compris DPX, EXR, GIF, JPEG, JPEG-2000, PDF, PhotoCD, PNG, Postscript, SVG et TIFF. Utilisez ImageMagick pour traduire, retourner, mettre en miroir, faire pivoter, redimensionner, cisailler et transformer des images, ajuster les couleurs d'une image, appliquer divers effets spéciaux ou dessiner du texte, des lignes, des polygones, des ellipses et des courbes de Bézier.

Answer 4

Avez-vous vraiment besoin d'avoir cette 'image de broche' dans l'image elle-même? Simple HTML & CSS (positionnement absolu) résoudrait très bien cette question avec pratiquement aucune charge pour tous les intervenants, avec le seul inconvénient de l'image n'est pas enregistrable avec l'image de recouvrement inclus.