如何制作带透明背景的椭圆形/圆形UIImage？现有代码背景呈黑色

这个问题我之前也碰到过，核心原因是你当前使用的UIGraphicsImageRenderer默认会创建一个不透明的绘图上下文，裁剪后未被图片覆盖的区域就会被填充成黑色。要解决这个问题，只需要调整渲染器的配置，让它支持透明背景即可，具体修改如下：

extension UIImage {
    var ellipseMasked: UIImage? {
        guard let cgImage = cgImage else { return nil }
        let rect = CGRect(origin: .zero, size: size)
        
        // 复制当前图片的渲染格式，并开启透明支持
        var rendererFormat = imageRendererFormat
        rendererFormat.opaque = false // 关键：设置上下文为非不透明，支持透明背景
        
        return UIGraphicsImageRenderer(size: size, format: rendererFormat)
            .image{ context in
                // 先填充透明背景（可选，但加上更稳妥，避免某些场景下的默认填充）
                UIColor.clear.setFill()
                context.fill(rect)
                
                // 裁剪椭圆区域并绘制图片
                UIBezierPath(ovalIn: rect).addClip()
                UIImage(cgImage: cgImage, scale: scale, orientation: imageOrientation)
                    .draw(in: rect)
            }
    }
}

关键改动说明： #

• 设置rendererFormat的opaque为false：这是最核心的一步，告诉渲染器创建一个支持Alpha通道的透明上下文，而不是默认的不透明RGB上下文。
• 填充透明背景：虽然设置opaque = false后上下文默认应该是透明的，但主动填充UIColor.clear可以避免一些边缘场景下的意外填充（比如某些iOS版本的默认行为差异）。

这样修改后，生成的椭圆形/圆形图片背景就会是完全透明的了。

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