UIKit中如何在图片下方添加文字生成新的UIImage

原有代码问题分析 #

你的代码无法展示下方文字的核心原因是：创建的画布尺寸和原图尺寸完全一致，超出原图区域的绘制内容会被直接裁剪，自然无法显示位于原图下方的文字。

具体实现逻辑 #

1. 先计算指定字体下文字需要占用的高度，加上你预留的上下边距，和原图高度相加得到新画布的总尺寸
2. 创建对应尺寸的透明画布，保留原图的透明属性
3. 将原图绘制到画布的顶部区域
4. 将文字绘制到原图下方的预留区域，可自行调整对齐方式、边距
5. 导出合成后的新UIImage

完整可运行代码 #

func addTextBelowImage(drawText text: String, inImage image: UIImage, textFont: UIFont = UIFont(name: "Helvetica Bold", size: 12)!, textColor: UIColor = .white, padding: CGFloat = 8) -> UIImage? {
    let scale = UIScreen.main.scale
    // 计算文字尺寸
    let textAttributes: [NSAttributedString.Key: Any] = [
        .font: textFont,
        .foregroundColor: textColor
    ]
    let textSize = text.size(withAttributes: textAttributes)
    
    // 计算新画布总尺寸：原图高度 + 上下边距 + 文字高度
    let totalHeight = image.size.height + padding * 2 + textSize.height
    let totalSize = CGSize(width: max(image.size.width, textSize.width), height: totalHeight)
    
    // 创建透明画布，第二个参数传false就是透明背景，适配你的透明原图需求
    UIGraphicsBeginImageContextWithOptions(totalSize, false, scale)
    
    // 绘制原图到顶部
    let imageOrigin = CGPoint(x: (totalSize.width - image.size.width) / 2, y: 0)
    image.draw(in: CGRect(origin: imageOrigin, size: image.size))
    
    // 绘制文字到原图下方，居中对齐
    let textOrigin = CGPoint(x: (totalSize.width - textSize.width) / 2, y: image.size.height + padding)
    text.draw(in: CGRect(origin: textOrigin, size: textSize), withAttributes: textAttributes)
    
    // 导出新图
    let newImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    
    return newImage
}

使用示例 #

// 调用示例
if let originalImage = UIImage(named: "你的原图名"),
   let newImage = addTextBelowImage(drawText: "要添加的文字内容", inImage: originalImage) {
    // 直接使用生成的newImage即可
}

代码里默认做了原图和文字的居中对齐，你可以根据需求调整padding边距、字体、颜色等参数，也支持保留原图的透明背景属性，不需要额外处理。

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