"在Python中实现iOS角落平滑"

Question

我正在处理一个涉及视频帧操作的项目，其中一项要求就是在帧上添加平滑圆角。我研究过如何使用PIL或其他图像处理库给图片添加圆角，但它们产生的效果都是较为粗糙的，看起来不够专业。

这是我尝试过的代码：

def add_corners(im, rad):
    circle = Image.new('L', (rad * 2, rad * 2), 0)
    draw = ImageDraw.Draw(circle)
    draw.ellipse((0, 0, rad * 2 - 1, rad * 2 - 1), fill=255)
    alpha = Image.new('L', im.size, 255)
    w, h = im.size
    alpha.paste(circle.crop((0, 0, rad, rad)), (0, 0))
    alpha.paste(circle.crop((0, rad, rad, rad * 2)), (0, h - rad))
    alpha.paste(circle.crop((rad, 0, rad * 2, rad)), (w - rad, 0))
    alpha.paste(circle.crop((rad, rad, rad * 2, rad * 2)), (w - rad, h - rad))
    im.putalpha(alpha)
    return im

im = Image.open('sand.png')
im = add_corners(im, 50)
im.save('sand_corner.png')

如上面的截图所示，这种方法得到的结果中，圆角显得很粗糙且存在明显的像素化现象，不像在Figma中使用iOS风格的圆角那样平滑：

我也参考了Stack Overflow上的一个问题，该问题也提出了同样的需求，但是没有展示具体的实现代码：链接

我希望在添加圆角时确保帧的质量不受损失，圆角应当平滑，并且最好能达到Figma中那种平滑度。

编辑更新：

out = cv2.VideoWriter('assets/pathToSave.mp4', fourcc, fps, (1920, 1080))

def generate_frame():
    while cap.isOpened():
        code, frame = cap.read()
        if code:
            yield frame
        else:
            print("完成")
            break

for i, frame in enumerate(generate_frame()):
    # 将OpenCV帧转换为PIL图像
    img = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
    im_pil = Image.fromarray(img)
    ss = 4
    alpha = Image.new('L', (im.width*ss, im.height*ss))

    # 绘制圆角矩形并进行下采样
    d = ImageDraw.Draw(alpha)
    d.rounded_rectangle([0,0,im.width*ss-1,im.height*ss-1],radius=120,fill='white')
    alpha = alpha.resize((alpha.width//ss, alpha.height//ss), resample=Image.Resampling.LANCZOS)
    alpha.save('DEBUG-alpha.png')

    # 将新透明通道应用到原始图像并保存
    im_pil.putalpha(alpha)
    im_np = np.array(im_pil.convert('RGB'))

    open_cv_image = im_np[:, :, ::-1].copy()

    outputVideo.write(open_cv_image)

为了从传入的视频帧中添加圆角，我尝试了上述代码，但仍然得到了粗糙的圆角：

请看白色边框部分，透明的圆角实际上是背景的一部分，在视频渲染在其上时显现出来的。

David Grayson · Answer

也许这个方法更好：

#!/usr/bin/env python3

from PIL import Image, ImageDraw

# 打开图像
im = Image.open('rock.jpg')

# 创建一个新的 alpha 通道，对其进行4倍超采样
ss = 4
alpha = Image.new('L', (im.width*ss, im.height*ss))

# 绘制圆角矩形，然后进行下采样
d = ImageDraw.Draw(alpha)
d.rounded_rectangle([0, 0, im.width*ss-1, im.height*ss-1], radius=120, fill='white')
alpha = alpha.resize((alpha.width//ss, alpha.height//ss), resample=Image.Resampling.LANCZOS)
alpha.save('DEBUG-alpha.png')  # 保存调试用的 alpha 通道图像

# 将新的 alpha 通道合并到原始图像中并保存结果
im.putalpha(alpha)
im.save('result.png')

user · Answer

我认为众多优秀解决方案中的一种是使用PIL库中的ImageFilter.GaussianBlur方法。实现时大致如下所示：

from PIL import Image
from PIL import ImageDraw
from PIL import ImageFilter

def convert_jpg_to_png(jpg_path, png_path):
    img = Image.open(jpg_path)
    img.save(png_path)

def add_corners(im, rad, blur_radius):
    # 创建一个圆形模板
    circle = Image.new('L', (rad * 2, rad * 2), 0)
    draw = ImageDraw.Draw(circle)
    draw.ellipse((0, 0, rad * 2 - 1, rad * 2 - 1), fill=255)
    
    # 创建与原始图像相同大小的透明背景层
    alpha = Image.new('L', im.size, 255)
    
    # 将四个象限的圆形粘贴到透明背景层上
    w, h = im.size
    alpha.paste(circle.crop((0, 0, rad, rad)), (0, 0))
    alpha.paste(circle.crop((0, rad, rad, rad * 2)), (0, h - rad))
    alpha.paste(circle.crop((rad, 0, rad * 2, rad)), (w - rad, 0))
    alpha.paste(circle.crop((rad, rad, rad * 2, rad * 2)), (w - rad, h - rad))

    # 对每个角落应用高斯模糊
    for i in range(0, w, w - rad):
        for j in range(0, h, h - rad):
            corner = alpha.crop((i, j, i + rad, j + rad))
            blurred_corner = corner.filter(ImageFilter.GaussianBlur(blur_radius))
            alpha.paste(blurred_corner, (i, j))

    # 将处理后的alpha通道应用于原始图像并返回
    im.putalpha(alpha)
    return im

# 示例使用
convert_jpg_to_png('mountain-landscape-2031539_1280.jpg', 'mountain-landscape-2031539_1280.png')
im = Image.open('mountain-landscape-2031539_1280.png')
im = add_corners(im, 500, 5)
im.save('mountain-landscape-2031539_1280_corner.png')

# 上述代码生成了带模糊边框的图像（见附件链接）
# ![A close up of the blurred border](https://i.stack.imgur.com/Cy3RB.png)

# 我现在尝试对您提供的另一张图片应用此方法
im = Image.open('Beirp.png')
im = add_corners(im, 50, 2)
im.save('new_idk_image.png')

# 这是经过圆角和模糊处理后的您的图片：
# ![This was your image that you rounded the corners with it has blurring applied](https://i.stack.imgur.com/kjuUz.png)

# 祝您编码愉快！:D