Preserving color in a graphics context

Question

I have a UILabel with an NSMutableAttributedString of foregroundColor: UIColor.red.

I'm looking to render the label as a UIImage while preserving its original color, but it's rendered in black.

extension NSMutableAttributedString {
    func title(_ text: String, color: UIColor) {
        let attr = [NSAttributedString.Key.foregroundColor: color]
        let str = NSMutableAttributedString(string: text, attributes: attr)
        append(str)
    }
}

extension UIImage {
    class func imageWithLabel(label: UILabel) -> UIImage {
        UIGraphicsBeginImageContextWithOptions(label.bounds.size, false, 0.0)
        label.layer.render(in: UIGraphicsGetCurrentContext()!)
        let img = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return img!
    }
}

let label = UILabel(frame: CGRect(x: 0, y: 0, width: 100, height: 50))
let formattedString = NSMutableAttributedString()
formattedString.title("Hello, world", color: .red)
label.attributedText = formattedString
let image = UIImage.imageWithLabel(label: label) // returns a black label

How can I preserve the red foreground color of the label in the UIImage??

Answer 1

Believe it or not attributed strings know how to draw themselves so you can just write:

extension UIImage {
  class func imageWithLabel(label: UILabel) -> UIImage {
    return UIGraphicsImageRenderer(bounds: label.bounds).image { _ in
      label.attributedText?.draw(in: label.bounds)
    }
  }
}

but since you don't even need the label you can just do:

extension NSAttributedString {
  func image(size: CGSize) -> UIImage {
    return UIGraphicsImageRenderer(size: size).image { _ in
      self.draw(at: .zero)
    }
  }
}

See the apple docs on draw

Here is a playground:

import UIKit
import PlaygroundSupport
import UIKit
import PlaygroundSupport

extension NSMutableAttributedString {
    func title(_ text: String, color: UIColor) {
        let attr = [NSAttributedString.Key.foregroundColor: color]
        let str = NSMutableAttributedString(string: text, attributes: attr)
        append(str)
    }
}

extension NSAttributedString {
  func image(size: CGSize) -> UIImage {
    return UIGraphicsImageRenderer(size: size).image { _ in
      self.draw(at: .zero)
    }
  }
}

let segmentedControl = UISegmentedControl.init(frame: .init(origin: .zero, size: .init(width: 160, height: 20)))
let formattedString = NSMutableAttributedString()
formattedString.title("Hello, world", color: .red)
let image = formattedString.image(size: .init(width: 60, height: 20))
segmentedControl.insertSegment(with: image.withRenderingMode(.alwaysOriginal), at: 0, animated: false)
segmentedControl.insertSegment(withTitle: "test", at: 1, animated: false)
segmentedControl.backgroundColor = .white
PlaygroundPage.current.liveView = segmentedControl