SwiftUI：解决截取带圆角视图生成UIImage后出现非圆角黑边的问题

我之前也碰到过一模一样的问题！你的截图逻辑是先捕获整个window的截图再裁剪，这就导致视图圆角外面的区域露出了window的黑色背景，所以才会出现那些未圆角的黑边。下面给你拆解原因和解决方案：

问题根源 #

你的takeScreenshot方法是先把整个窗口的内容截下来，再裁剪到目标视图的frame范围。但SwiftUI的.cornerRadius是在视图自身的渲染层级里做的裁剪，而window的默认背景是黑色的——所以裁剪后的截图里，视图圆角之外的区域就露出了底层window的黑色，也就是你看到的黑边。

推荐方案：直接渲染目标视图 #

与其截取整个窗口再裁剪，不如直接渲染你需要的SwiftUI视图，这样可以把渲染背景设为透明，从根源上避免黑边。下面是修改后的截图扩展：

extension View {
    func snapshot() -> UIImage? {
        // 用UIHostingController包裹目标SwiftUI视图
        let hostingController = UIHostingController(rootView: self)
        // 设置背景为透明，确保圆角外无黑色底色
        hostingController.view.backgroundColor = .clear
        // 让视图自适应自身内容尺寸
        hostingController.view.frame = CGRect(origin: .zero, size: hostingController.view.intrinsicContentSize)
        
        // 使用图像渲染器直接渲染视图内容
        let renderer = UIGraphicsImageRenderer(size: hostingController.view.intrinsicContentSize)
        return renderer.image { context in
            hostingController.view.drawHierarchy(in: hostingController.view.bounds, afterScreenUpdates: true)
        }
    }
}

使用方式 #

直接调用需要截图的视图的snapshot方法就行：

let shareImage = shareCard.snapshot()

这个方法不仅能解决黑边问题，还能避免截取到窗口中其他无关内容，效率也更高。

备选方案：修复原有裁剪逻辑 #

如果你必须保留原有截取窗口再裁剪的逻辑，可以在裁剪后把图片中的黑色背景转为透明。不过这种方法可能会误伤图片里原本的黑色内容，仅作为备选：

extension UIImage {
    func removeBlackBackground() -> UIImage? {
        guard let cgImage = self.cgImage else { return nil }
        let coreImage = CIImage(cgImage: cgImage)
        
        // 创建黑色背景的遮罩
        let mask = coreImage.applyingFilter("CIColorThreshold", parameters: [
            kCIInputThresholdKey: 0.1
        ])
        
        // 用遮罩去除黑色背景
        let outputImage = coreImage.applyingFilter("CIBlendWithMask", parameters: [
            kCIInputMaskImageKey: mask
        ])
        
        guard let outputCGImage = CIContext(options: nil).createCGImage(outputImage, from: outputImage.extent) else {
            return nil
        }
        return UIImage(cgImage: outputCGImage)
    }
}

然后在你的takeScreenshot方法里，把返回值改成：

return croppedImage?.removeBlackBackground()

额外提醒 #

• 确保你的目标视图已经添加了.clipped()修饰符（你已经加了），这会保证视图超出圆角的内容被正确裁剪。
• 如果视图有多层叠加效果，直接渲染的方式会完整保留所有样式，包括圆角和透明度。

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