تقريب زوايا الصور مع ImageMagick

Question

في تطبيق القضبان الخاص بي، أريد أن أحصل على قسم ملف تعريف مشابه مثل Facebook حيث يتم إخضاع الصور التي تم تحميلها تلقائيا وتقريب الركن. أنا أستخدم convert فائدة لتقليص حجم الصور إلى الصور المصغرة، ولكن هل هناك خيار لتقريب زواياهم أيضا؟ شكرا.

Answer 1

فيما يلي بعض أمثلة زوايا مدورة: http://www.imagemagick.org/usage/thumbnails/#rounded_border.. وبعد ستحتاج إلى إنشاء قناع من نوع ما (إما باليد أو استخدام أدوات الرسم) ثم تراكبه على صورتك.

Answer 2

حل عالمي

يعمل هذا الحل مع صور شفافة وغير شفافة. لإضافة 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

للراحة، إليك ما تفعله عادة في روبي أو بعض اللغات الأخرى:

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/#reund.

Answer 3

Facebook لا يقوم بتعديل الصور لزيادة الزوايا. بدلا من ذلك، يستخدمون HTML و CSS لتطبيق هذه الصورة على كل صورة مستخدم: http://www.facebook.com/images/ui/uiroundedimage.png.

إذا تفحصت UIRoundedImage.png, ، ستجد أن كل "مربع" يتكون من مركز شفاف، وزوايا غير شفافة تهدف إلى مطابقة الخلفية التي ستستريح فيها صورة المستخدم. على سبيل المثال، إذا كانت صورة المستخدم على خلفية بيضاء، فستكون الزوايا البيضاء المدورة البيضاء في صورة المستخدم.

تقنية CSS لاستخدام جزء معين فقط من UIRoundedImage.png يسمى "CSS العفاريت". يمكنك قراءة المزيد عنه هنا: http://www.alistapart.com/articles/sprites/

Answer 4

إليك الرمز الذي كتبته إلى جولة الزوايا مع ImageMagick باستخدام بيرل. يجب أن ينفذ إلى روبي بسهولة إلى حد ما:

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