Arredondamento cantos de fotos com ImageMagick

Question

nos meus Rails app que eu quero ter uma seção de perfil semelhante, como Facebook, onde imagens enviadas são automaticamente miniaturizadas e canto-arredondado. Estou usando o utilitário convert para reduzir imagens em miniaturas, mas existe uma opção para arredondar seus cantos também? Obrigado.

Answer 1

Aqui estão alguns exemplos cantos arredondados: http://www.imagemagick.org/Usage / thumbnails / # rounded_border . Você vai precisar para criar uma máscara de algum tipo (à mão ou usando as ferramentas de desenho) e depois cobri-la na sua imagem.

Answer 2

Solução Universal

Esta solução trabalha com imagens transparentes e não transparentes. Para adicionar 15 pixels de raio cantos arredondados para original_picture.png que é uma imagem 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

Esta solução foi dada pelo PM aqui: https://stackoverflow.com/a/1916256/499917

Solução elegante, não funciona com imagens transparentes

Esta solução funciona sem qualquer imagem intermediária. Que bom! Mas vai perturbar a transparência da sua imagem original. Portanto, use apenas quando tiver certeza de que a sua imagem não é transparente.

Suponha que você queira cantos arredondados com 15px raio:

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

Por conveniência, aqui está o que você normalmente vai fazer em Ruby ou outras linguagens:

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}`

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

Answer 3

Facebook não modifica imagens para ter cantos arredondados. Em vez disso, eles usam HTML e CSS para aplicar esta imagem em cada imagem do usuário: http: // www.facebook.com/images/ui/UIRoundedImage.png

Se você inspecionar UIRoundedImage.png, você verá que cada "quadrado" consiste de um centro transparente e cantos opacos que são destinados para coincidir com o fundo sobre o qual a imagem do usuário vai descansar. Por exemplo, se a imagem do usuário está em um fundo branco, em seguida, cantos arredondados opacas brancas serão sobrepostos na imagem do usuário.

A técnica CSS para usar apenas uma parte específica do UIRoundedImage.png é chamado de "sprites CSS". Você pode ler mais sobre ele aqui: http://www.alistapart.com/articles/sprites/

Answer 4

Aqui está o código que escreveu para cantos arredondados com ImageMagick usando Perl. Deve porta para Ruby com bastante facilidade:

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