Cet article à été lu 9 794 fois

ImageMagick, découper une image en plusieurs morceaux pour une page WEB



Lorsque l’on créé un thème pour un site ou un blog, il est parfois possible de vouloir obtenir plusieurs liens au sein d’une seule et même image. Si vous avez un menu graphique ou une carte avec différentes zones que vous voulez rendre cliquables.

ImageMagick est un logiciel libre, comprenant une bibliothèque, ainsi qu’un ensemble d’utilitaires en ligne de commande, permettant de créer, de convertir, de modifier et d’afficher des images dans un très grand nombre de formats. Les images peuvent être découpées, les couleurs peuvent être modifiées, différents effets peuvent être appliqués aux images, les images peuvent subir des rotations, il est possible d’y inclure du texte, Plus d’information…

Image Source

Formule ImageMagick

Pour découper une image il faut utiliser l’option -crop, puis lui ajouter le nombre de morceaux que le veux couper. Dans l’exemple ci-dessous l’image sera coupée en -crop 2×2=4. Avec la formule suivante crop 3×2 l’image sera coupée en 6, ou encore -crop 3×3 en 9 morceaux. Les nouvelles images crées ont un nom du type img_0d.jpg à img_xd.jpg en fonction du nombre de morceaux.

  • convert.exe img.jpg -crop 2×2@ +repage +adjoin img_%d.jpg

Résultat

  • img_d-0.jpg

  • img_d-1.jpg

  • img_d-2.jpg

  • img_d-3.jpg

Afficher l’image dans une page HTML

Cette image est coupé en 4 zones cliquables

  • En haut à gauche : Page d’accueil de Google
  • En haut à droite : Page d’accueil de Bing
  • En bas à gauche : Page d’accueil de Yahoo
  • En bas à droite : Page d’accueil de Voilà
Google Bing
Yahoo Voila

Code HTML pour afficher l’image

Vous devriez aussi lire ces articles

About Erwan

L’homme est un être paresseux qui utilise son intelligence pour éviter le travail inutile. - http://www.zapwallpaper.fr - http://www.cmdvb.fr