Imagemagick과 함께 사진의 둥근 모서리

StackOverflow https://stackoverflow.com/questions/718314

문제

내 Rails 앱에는 업로드 된 이미지가 자동 썸네일되고 코너 라운드가있는 Facebook과 유사한 프로필 섹션을 원합니다. 나는 사용하고있다 convert 이미지 크기를 축소판으로 줄이는 유틸리티이지만 모서리를 둥글게하는 옵션이 있습니까? 감사.

도움이 되었습니까?

해결책

다음은 둥근 모서리 예제입니다. http://www.imagemagick.org/usage/thumbnails/#rounded_border. 손으로 또는 드로잉 도구를 사용하여 어떤 종류의 마스크를 만들고 이미지로 오버레이해야합니다.

다른 팁

보편적 솔루션

이 솔루션은 투명하고 비 투명한 사진과 함께 작동합니다. 15 픽셀 반경 둥근 모서리를 추가하려면 original_picture.png 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

이 솔루션은 주어졌습니다 오후 여기: https://stackoverflow.com/a/1916256/499917

우아한 솔루션은 투명한 그림과 함께 작동하지 않습니다

이 솔루션은 중간 그림없이 작동합니다. 얼마나 멋져요! 그러나 원래 그림의 투명성을 방해합니다. 따라서 사진이 투명하지 않다고 확신 할 때만 사용하십시오.

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

편의를 위해 여기에 Ruby 또는 다른 언어로 일반적으로 할 일이 있습니다.

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

원천: http://www.imagemagick.org/usage/thumbnails/#rounded

Facebook은 둥근 모서리가있는 그림을 수정하지 않습니다. 대신 HTML 및 CSS를 사용하여 각 사용자 사진을 통해이 이미지를 적용합니다. http://www.facebook.com/images/ui/uiroundedimage.png

검사하는 경우 UIRoundedImage.png, 각 "정사각형"은 투명한 중심으로 구성되어 있으며, 사용자 사진이 놓일 배경과 일치하는 불투명 한 코너로 구성되어 있습니다. 예를 들어, 사용자 사진이 흰색 배경에 있으면 흰색 불투명 둥근 모서리가 사용자 사진에 겹쳐집니다.

특정 부분 만 사용하기위한 CSS 기술 UIRoundedImage.png "CSS 스프라이트"라고합니다. 자세한 내용은 다음을 참조하십시오. http://www.alistapart.com/articles/sprites/

Perl을 사용하여 Imagemagick과 함께 둥근 코너에 쓴 코드는 다음과 같습니다. Ruby에게 상당히 쉽게 포트해야합니다.

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

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top