[ImageMagick] Découper une image en plusieurs morceaux pour une page WEB

9 novembre 2010 R1C ImageMagick, Logiciels, Tutoriels 3

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

Sovrn
A propos de R1C 159 Articles
C’est à la fois des logiciels de ma conception disponibles gratuitement mais c’est aussi des informations sur tout ce qui à un rapport avec l’image et la photo.

2 Comments

  1. salut et si je veut que le nom des fichiers de sortie soit :
    – image 1-1.jpg pour haut à droite
    – image 2-1.jpg pour haut à gauche
    – image 1-2.jpg pour bas à droite
    – image 2-2.jpg pour bas à gauche
    comme une grille comment je transforme ce code ?? merci

    • Je ne sais pas si c’est possible avec ImageMagick (désolé), mais en Visual Basic oui :
      – Dans un premier temps on découpe les images,
      – puis ensuite on les renommes comme on veut.

      Si vous avez trouvez une solution entre temps je serais ravi de la connaitre.

Poster un Commentaire