如何对scaleAspectFit模式下的UIImageView生成含叠加视图的截图？

你遇到的这个场景在iOS开发里挺常见的——给UIImageView设置了contentMode = .scaleAspectFit、背景色为红色（这会在图片无法填满视图时显示红色边距，属于正常现象），还在这个视图上添加了Label、其他图片等子控件，最后需要生成包含所有内容的完整图片用于分享或保存到相册。

如果直接用不完整的UIGraphicsBeginImageContextWithOptions写法，很容易出现生成的图片要么包含多余的红色背景（如果不需要的话），要么子控件位置偏移的问题。下面给你两种实用的实现方案：

方案一：生成包含所有视觉内容的图片（保留红色背景） #

这个方案会完整还原你在界面上看到的所有内容，包括UIImageView的红色背景、缩放后的图片，以及所有添加的子控件：

private func generateImage() -> UIImage? {
    // 先确保所有控件都完成布局，避免子控件位置错乱
    imageView.layoutIfNeeded()
    
    // 用Apple推荐的UIGraphicsImageRenderer替代旧的绘图API，自动适配Retina屏幕
    let renderer = UIGraphicsImageRenderer(size: imageView.bounds.size)
    let finalImage = renderer.image { context in
        // 绘制整个imageView的图层树，包含所有内容
        imageView.layer.render(in: context.cgContext)
    }
    
    return finalImage
}

为什么这么写？ #

• layoutIfNeeded()：强制完成所有布局计算，保证子控件的位置和尺寸都已经确定，避免生成的图片里子控件跑位。
• UIGraphicsImageRenderer：比旧的UIGraphicsBeginImageContext更安全、高效，自动处理屏幕缩放因子，不会生成模糊的低分辨率图片。
• layer.render(in:)：直接绘制视图的整个图层结构，完美复现界面上的视觉效果，不用手动处理图片缩放和子控件绘制的细节。

方案二：生成仅包含图片和子控件的图片（去掉红色背景） #

如果你的需求是只保留编辑后的图片内容，去掉UIImageView的红色背景，可以用这个方案：

private func generateImageWithoutRedBackground() -> UIImage? {
    guard let originalImage = imageView.image else { return nil }
    imageView.layoutIfNeeded()
    
    // 计算.scaleAspectFit模式下，图片在imageView中的实际显示尺寸和位置
    let imageSize = originalImage.size
    let viewSize = imageView.bounds.size
    
    let scaleFactor = min(viewSize.width / imageSize.width, viewSize.height / imageSize.height)
    let scaledImageSize = CGSize(width: imageSize.width * scaleFactor, height: imageSize.height * scaleFactor)
    let imageOriginInView = CGPoint(x: (viewSize.width - scaledImageSize.width)/2, y: (viewSize.height - scaledImageSize.height)/2)
    
    // 创建和图片实际显示尺寸一致的画布
    let renderer = UIGraphicsImageRenderer(size: scaledImageSize)
    let finalImage = renderer.image { context in
        // 先绘制缩放后的原图
        originalImage.draw(in: CGRect(origin: .zero, size: scaledImageSize))
        
        // 把每个子控件的位置转换到图片坐标系，再绘制到画布上
        for subview in imageView.subviews {
            let subviewFrameInImage = CGRect(
                x: subview.frame.origin.x - imageOriginInView.x,
                y: subview.frame.origin.y - imageOriginInView.y,
                width: subview.frame.width,
                height: subview.frame.height
            )
            
            // 调整绘图上下文的坐标，绘制子控件
            context.cgContext.translateBy(x: subviewFrameInImage.origin.x, y: subviewFrameInImage.origin.y)
            subview.layer.render(in: context.cgContext)
            context.cgContext.translateBy(x: -subviewFrameInImage.origin.x, y: -subviewFrameInImage.origin.y)
        }
    }
    
    return finalImage
}

核心逻辑说明： #

1. 先算出.scaleAspectFit模式下图片的实际显示区域，避免包含红色背景的部分。
2. 先绘制缩放后的原图，再把每个子控件的位置从UIImageView的坐标系转换到图片的坐标系，确保子控件能准确叠加在图片上对应的位置。

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