如何高效且正确地叠加带透明通道的PNG图片？

我尝试叠加两张图片：一张是带透明圆角矩形的图片（pink.png），另一张是普通图片（yellow.png）。叠加后出现两种错误效果：

• 错误效果1：完全忽略圆角直接覆盖，黄色图直接盖在粉色图上，圆角被无视
• 错误效果2：仅显示圆角矩形并保留透明，黄色图未出现在圆角区域内

预期效果是：黄色图透过粉色图的圆角区域显示，圆角外保持粉色图的透明效果。

原代码问题分析 #

1. 错误处理alpha通道：代码中将粉色图所有alpha<255的像素设为全透明，丢失了圆角的半透明信息，导致叠加时无法识别有效区域。
2. 掩码逻辑错误：仅基于黄色图的位置生成掩码，没有结合粉色图本身的alpha通道，导致叠加范围不符合圆角区域。
3. 混合方式不对：使用addWeighted时未考虑两张图的alpha通道混合逻辑，无法实现透过圆角显示的效果。

修正后的代码 #

import cv2
import numpy as np

# 读取两张图片，保留alpha通道
layer0 = cv2.imread('yellow.png', cv2.IMREAD_UNCHANGED)
# 若黄色图无alpha通道，转为BGRA格式
if layer0.shape[2] == 3:
    layer0 = cv2.cvtColor(layer0, cv2.COLOR_BGR2BGRA)
h0, w0 = layer0.shape[:2]

layer4 = cv2.imread('pink.png', cv2.IMREAD_UNCHANGED)
h4, w4 = layer4.shape[:2]

# 黄色图在粉色图上的起始位置
gridpos = (497, 419)
x1, y1 = gridpos
x2, y2 = x1 + w0, y1 + h0

# 确保黄色图在粉色图范围内，超出部分裁剪
x1 = max(0, x1)
y1 = max(0, y1)
x2 = min(w4, x2)
y2 = min(h4, y2)
crop_w = x2 - x1
crop_h = y2 - y1

# 裁剪黄色图到对应区域
cropped_yellow = layer0[:crop_h, :crop_w]

# 提取alpha通道并转为0-1范围的权重
pink_alpha = layer4[y1:y2, x1:x2, 3] / 255.0
yellow_alpha = cropped_yellow[:, :, 3] / 255.0

# 循环测试不同alpha混合值
for alpha in np.arange(0, 1.1, 0.1)[::-1]:
    bg_img = layer4.copy()
    
    # 计算混合后的总alpha，避免除以0
    combined_alpha = alpha * yellow_alpha + (1 - alpha) * pink_alpha
    combined_alpha[combined_alpha == 0] = 1e-6
    
    # 混合RGB通道
    for c in range(3):
        bg_img[y1:y2, x1:x2, c] = (
            alpha * cropped_yellow[:, :, c] * yellow_alpha +
            (1 - alpha) * bg_img[y1:y2, x1:x2, c] * pink_alpha
        ) / combined_alpha
    
    # 更新alpha通道
    bg_img[y1:y2, x1:x2, 3] = (combined_alpha * 255).astype(np.uint8)
    
    # 添加alpha值文本标注
    cv2.putText(bg_img, f'Alpha: {round(alpha,1)}', (50, 200),
                cv2.FONT_HERSHEY_PLAIN, 8, (200, 200, 200), 7)
    
    # 调整尺寸并显示、保存
    bg_img_resized = cv2.resize(bg_img, (700, 600))
    cv2.imwrite(f'out_alpha_{round(alpha,1)}.png', bg_img)
    cv2.imshow('Final Overlay', bg_img_resized)
    cv2.waitKey(0)

cv2.destroyAllWindows()

代码关键点说明 #

• 保留alpha通道：确保两张图的透明信息不丢失，无alpha通道的图片转为BGRA格式。
• 边界处理：裁剪黄色图到粉色图的有效范围内，避免数组越界错误。
• 基于alpha的混合：利用粉色图的alpha通道确定叠加区域，只在圆角内混合黄色图，同时计算RGB和alpha的混合值，保证透明效果自然。
• 动态alpha测试：循环测试不同混合比例，方便观察效果。

内容的提问来源于stack exchange，提问作者Learner