Arrondir les coins des images avec ImageMagick

Question

dans mon application Rails je veux avoir une section de profil similaire, comme Facebook, où les images sont téléchargées automatiquement miniaturisés et coin arrondi. J'utilise l'utilitaire convert pour réduire la taille des images en vignettes, mais est-il une option pour arrondir leurs angles aussi? Merci.

Answer 1

Voici quelques exemples de coins arrondis: http://www.imagemagick.org/Usage / vignettes / # rounded_border . Vous devrez créer un masque de quelque sorte (que ce soit à la main ou à l'aide des outils de dessin) puis superposer sur votre image.

Answer 2

Solution universelle

Cette solution fonctionne avec des images transparentes et non transparentes. Pour ajouter 15 pixels radius coins arrondis à original_picture.png qui est une image de 100x100:

convert -size 100x100 xc:none -draw "roundrectangle 0,0,100,100,15,15" mask.png
convert original_picture.png -matte mask.png \
  -compose DstIn -composite picture_with_rounded_corners.png

Cette solution a été donnée par PM ici: https://stackoverflow.com/a/1916256/499917

Solution élégante, ne fonctionne pas avec des images transparentes

Cette solution fonctionne sans image intermédiaire. Comme c'est gentil! Mais il va perturber la transparence de votre image d'origine. Il faut donc utiliser que lorsque vous êtes sûr que votre image est pas transparent.

Supposons que vous voulez des coins arrondis avec un rayon de 15px:

convert original_picture.png \
  \( +clone  -alpha extract \
    -draw 'fill black polygon 0,0 0,15 15,0 fill white circle 15,15 15,0' \
    \( +clone -flip \) -compose Multiply -composite \
    \( +clone -flop \) -compose Multiply -composite \
  \) -alpha off -compose CopyOpacity -composite picture_with_rounded_corners.png

Pour plus de commodité, voici ce que vous généralement faire en Ruby ou d'autres langues:

in_pic = "original_picture.png"
out_pic = "picture_with_rounded_corners.png"
radius = 15
cmd = "convert #{in_pic} \\( +clone  -alpha extract " +
        "-draw 'fill black polygon 0,0 0,#{radius} #{radius},0 fill white circle #{radius},#{radius} #{radius},0' " +
        "\\( +clone -flip \\) -compose Multiply -composite " +
        "\\( +clone -flop \\) -compose Multiply -composite " +
        "\\) -alpha off -compose CopyOpacity -composite #{out_pic}"
`#{cmd}`

Source: http://www.imagemagick.org/Usage/thumbnails/#rounded

Answer 3

Facebook ne modifie pas les images pour avoir des coins arrondis. Ils utilisent plutôt HTML et CSS pour appliquer cette image sur chaque image utilisateur: http: // www.facebook.com/images/ui/UIRoundedImage.png

Si vous inspectez UIRoundedImage.png, vous trouverez que chaque « carré » se compose d'un centre transparent, et les coins opaques qui sont censés correspondre à l'arrière-plan sur lequel l'image de l'utilisateur reposera. Par exemple, si l'image de l'utilisateur est sur un fond blanc, puis blanc coins arrondis opaques seront superposés sur l'image de l'utilisateur.

La technique CSS en utilisant seulement une partie spécifique de UIRoundedImage.png est appelée « sprites CSS ». Vous pouvez en lire davantage ici: http://www.alistapart.com/articles/sprites/

Answer 4

Voici le code que j'ai écrit pour arrondir les coins avec ImageMagick en utilisant Perl. Il devrait port Ruby assez facilement:

http://article.gmane.org/gmane.comp. video.graphicsmagick.apis / 322