Create a UIImage with solid color and add text on top (Swift)

Question

so I have a UICollectionViewCell with a UIImage, and I'm trying to make the UIImage have a solid white background with text overlaid on top of it. I searched up how to do each of these separately and this is what I have:

Creating a UIImage with a solid color:

let rect = CGRect(origin: .zero, size: CGSize(width: 1, height: 1))
UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0)
let color = UIColor.white
color.setFill()
UIRectFill(rect)
let whiteImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

Then I'm calling the function textToImage with:

let textImage = textToImage(drawText: "Placeholder text", inImage: whiteImage, atPoint: CGPoint(x: 20.0, y: 20.0))

Where the textToImage function is:

func textToImage(drawText text: NSString, inImage image: UIImage, atPoint point: CGPoint) -> UIImage {
    let textColor = UIColor.black
    let textFont = UIFont(name: "Helvetica Neue", size: 74)

    UIGraphicsBeginImageContext(image.size)

    let textFontAttributes = [
        NSFontAttributeName: textFont,
        NSForegroundColorAttributeName: textColor,
        ] as [String : Any]
    image.draw(in: CGRect(origin: CGPoint.zero, size: image.size))

    let rect = CGRect(origin: point, size: image.size)
    text.draw(in: rect, withAttributes: textFontAttributes)

    let newImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    return newImage!
}

And then setting textImage as the UIImage for a UICollectionViewCell.

The textToImage function works on a normal image, but if I try to create an image with a solid color first, then try to call textToImage on that newly created image, the solid color shows up but the text doesn't. Any advice on what could be the problem here? Thanks!

score 0 · Answer 1 · answered Dec 21 '17 at 00:09

A few issues. Your primary is that whiteImage is only 1x1 points. So when you pass it to textToImage you are creating a new 1x1 image. Text is hard to read on such a small image.

Create whiteImage with a more useful size and things will be much better.

let rect = CGRect(origin: .zero, size: CGSize(width: 600, height: 300)) // pick a useful size

You should also change:

UIGraphicsBeginImageContext(image.size)

to:

UIGraphicsBeginImageContextWithOptions(image.size, false, image.scale)

score 0 · Answer 2 · answered Dec 21 '17 at 03:34

@rmaddy pointed out a few important things, but have you also considered using UIKit APIs for this? I don't know if you need to do anything with the image (send it to a server, save it to the library, etc) after you create it, but what you're describing would be really easy, and also really performant (this may not matter, I don' know how big your images are), if you just set the background color of your image view to white and add a label on top of it.

Even if you did need to capture that image and do something with it, iOS makes it pretty easy to screenshot a UIView. Here's a relevant link for that.

Create a UIImage with solid color and add text on top (Swift)

2 Answers2