Convert Apple Emoji (String) to UIImage

Question

I need all Apple Emojis.
I can get all the emojis and put them into a String by copying them from the site getemoji but in my app i need the emojis in the right order as images.

Is there a nice way to convert the emojis I copy into a String to a UIImage?
Or a better solution to get all the Apple emojis in the right order?

Luca Angeletti · Answer 1 · 2018-04-07T13:24:21.527

105

Updated for Swift 4.1

Add this extension to your project

import UIKit

extension String {
    func image() -> UIImage? {
        let size = CGSize(width: 40, height: 40)
        UIGraphicsBeginImageContextWithOptions(size, false, 0)
        UIColor.white.set()
        let rect = CGRect(origin: .zero, size: size)
        UIRectFill(CGRect(origin: .zero, size: size))
        (self as AnyObject).draw(in: rect, withAttributes: [.font: UIFont.systemFont(ofSize: 40)])
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image
    }
}

The code above draws the current String to an Image Context with a white background color and finally transform it into a UIImage.

Now you can write

Example

Given a list of ranges indicating the unicode values of the emoji symbols

let ranges = [0x1F601...0x1F64F, 0x2702...0x27B0]

you can transform it into a list of images

let images = ranges
    .flatMap { $0 }
    .compactMap { Unicode.Scalar($0) }
    .map(Character.init)
    .compactMap { String($0).image() }

Result:

I cannot guarantee the list of ranges is complete, you'll need to search for it by yourself

edited Apr 07 '18 at 13:24

answered Aug 06 '16 at 23:14

Luca Angeletti

58,465
13
121
148

@Danny182: Please see my update. Next time please create a new question if you have more requests. – Luca Angeletti Aug 07 '16 at 18:03
with the ranges won't work because they would be all mixed (the new ones have strange unicode). I have all the emojis in a array[String] @appzYourLife – DanielZanchi Aug 07 '16 at 20:29
1

But this is not vector based graphics anymore – Oleksii Nezhyborets Jan 16 '17 at 22:23
Is it possible to make background transparent? – Jonauz May 01 '18 at 14:54
Set the drawing origin to `CGPoint(x: 2, y: -1)` and the font size to 34 and the emojis will also be centered and fit into the image – Daniel Jul 26 '18 at 06:52
1

@Jonauz : Did you try `UIColor.clear.set()` instead of `UIColor.white.set()` ? – Karol Kulesza Jan 01 '19 at 10:46
For a 128×128 image, I used 120pt font with the origin at `CGPoint(x: 0, y: -5)`. – Joseph Jul 18 '19 at 18:20
@OleksiiNezhyborets emoji art is bitmap already, so nothing is actually lost (apart from resolution) – mredig Dec 01 '19 at 21:36

om-ha · Accepted Answer · 2020-11-24T09:24:44.010

Here's an updated answer with the following changes:

Centered: Used draw(at:withAttributes:) instead of draw(in:withAttributes:) for centering the text within the resulting UIImage
Correct Size: Used size(withAttributes:) for having a resulting UIImage of size that correlates to the actual size of the font.
Comments: Added comments for better understanding

Swift 5

import UIKit
extension String {
    func textToImage() -> UIImage? {
        let nsString = (self as NSString)
        let font = UIFont.systemFont(ofSize: 1024) // you can change your font size here
        let stringAttributes = [NSAttributedString.Key.font: font]
        let imageSize = nsString.size(withAttributes: stringAttributes)

        UIGraphicsBeginImageContextWithOptions(imageSize, false, 0) //  begin image context
        UIColor.clear.set() // clear background
        UIRectFill(CGRect(origin: CGPoint(), size: imageSize)) // set rect size
        nsString.draw(at: CGPoint.zero, withAttributes: stringAttributes) // draw text within rect
        let image = UIGraphicsGetImageFromCurrentImageContext() // create image from context
        UIGraphicsEndImageContext() //  end image context

        return image ?? UIImage()
    }
}

Swift 3.2

import UIKit
extension String {
    func textToImage() -> UIImage? {
        let nsString = (self as NSString)
        let font = UIFont.systemFont(ofSize: 1024) // you can change your font size here
        let stringAttributes = [NSFontAttributeName: font]
        let imageSize = nsString.size(attributes: stringAttributes)

        UIGraphicsBeginImageContextWithOptions(imageSize, false, 0) //  begin image context
        UIColor.clear.set() // clear background
        UIRectFill(CGRect(origin: CGPoint(), size: imageSize)) // set rect size
        nsString.draw(at: CGPoint.zero, withAttributes: stringAttributes) // draw text within rect
        let image = UIGraphicsGetImageFromCurrentImageContext() // create image from context
        UIGraphicsEndImageContext() //  end image context

        return image ?? UIImage()
    }
}

Why are you returning an optional extension String { func textToImage() -> UIImage? { if you have a default empty image return image ?? UIImage() — Muvimotv, May 01 '22 at 19:13

score 12 · Answer 3 · edited Jul 26 '18 at 06:05

Same thing for Swift 4:

extension String {
    func emojiToImage() -> UIImage? {
        let size = CGSize(width: 30, height: 35)
        UIGraphicsBeginImageContextWithOptions(size, false, 0)
        UIColor.white.set()
        let rect = CGRect(origin: CGPoint(), size: size)
        UIRectFill(rect)
        (self as NSString).draw(in: rect, withAttributes: [NSAttributedStringKey.font: UIFont.systemFont(ofSize: 30)])
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image
    }
}

score 9 · Answer 4 · edited Apr 07 '18 at 13:35

Updated @Luca Angeletti answer for Swift 3.0.1

extension String {

    func image() -> UIImage? {
        let size = CGSize(width: 30, height: 35)
        UIGraphicsBeginImageContextWithOptions(size, false, 0);
        UIColor.white.set()
        let rect = CGRect(origin: CGPoint(), size: size)
        UIRectFill(CGRect(origin: CGPoint(), size: size))
        (self as NSString).draw(in: rect, withAttributes: [NSFontAttributeName: UIFont.systemFont(ofSize: 30)])
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image
    }

}

score 7 · Answer 5 · edited Jun 20 '20 at 09:12

Swift 4.2

I really liked @Luca Angeletti solution. I hade the same question as @jonauz about transparent background. So with this small modification you get the same thing but with clear background color.

I didn't have the rep to answer in a comment.

import UIKit

extension String {
    func emojiToImage() -> UIImage? {
        let size = CGSize(width: 30, height: 35)
        UIGraphicsBeginImageContextWithOptions(size, false, 0)
        UIColor.clear.set()
        let rect = CGRect(origin: CGPoint(), size: size)
        UIRectFill(CGRect(origin: CGPoint(), size: size))
        (self as NSString).draw(in: rect, withAttributes: [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 30)])
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image
    }
}

JollyJinx · Answer 6 · 2020-03-05T05:36:28.230

Swift 5: ( with optional fontSize, imageSize and bgColor)

use it like this:

let image      = "".image()
let imageLarge = "".image(fontSize:100)
let imageBlack = "".image(fontSize:100, bgColor:.black)
let imageLong  = "".image(fontSize:100, imageSize:CGSize(width:500,height:100))


import UIKit

extension String
{
    func image(fontSize:CGFloat = 40, bgColor:UIColor = UIColor.clear, imageSize:CGSize? = nil) -> UIImage?
    {
        let font = UIFont.systemFont(ofSize: fontSize)
        let attributes = [NSAttributedString.Key.font: font]
        let imageSize = imageSize ?? self.size(withAttributes: attributes)

        UIGraphicsBeginImageContextWithOptions(imageSize, false, 0)
        bgColor.set()
        let rect = CGRect(origin: .zero, size: imageSize)
        UIRectFill(rect)
        self.draw(in: rect, withAttributes: [.font: font])
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image
    }
}

@VitalikKizlov Refer to my [answer](https://stackoverflow.com/a/55339365/10830091) for this and feel free (you or this answer's author Jolly Jinx) to edit this Swift5 answer based on mine. Use [`draw(at:withAttributes:)`](https://developer.apple.com/documentation/foundation/nsstring/1533109-draw) instead of `draw(in:withAttributes:)`. — om-ha, Apr 07 '20 at 18:54

score 3 · Answer 7 · answered Jun 23 '19 at 07:57

Updated version of @Luca Angeletti's answer using UIGraphicsImageRenderer:

extension String {
    func image() -> UIImage? {
        let size = CGSize(width: 100, height: 100)
        let rect = CGRect(origin: CGPoint(), size: size)
        return UIGraphicsImageRenderer(size: size).image { (context) in
            (self as NSString).draw(in: rect, withAttributes: [.font : UIFont.systemFont(ofSize: 100)])
        }
    }
}

score 1 · Answer 8 · answered Dec 01 '19 at 21:45

This variation is based on @Luca's accepted answer, but allows you to optionally customize the point size of the font, should result in a centered image, and doesn't make the background color white.

extension String {
    func image(pointSize: CGFloat = UIFont.systemFontSize) -> UIImage? {
        let nsString = self as NSString
        let font = UIFont.systemFont(ofSize: pointSize)

        let size = nsString.size(withAttributes: [.font: font])
        UIGraphicsBeginImageContextWithOptions(size, false, 0)
        let rect = CGRect(origin: .zero, size: size)
        nsString.draw(in: rect, withAttributes: [.font: font])
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image
    }
}

score 0 · Answer 9 · answered Aug 20 '23 at 17:47

It's actually much simpler than suggested answers.

extension String {
    func image(pointSize: CGFloat, backgroundColor: UIColor = .clear) -> UIImage {
        let font = UIFont.systemFont(ofSize: pointSize)
        let emojiSize = self.size(withAttributes: [.font: font])

        return UIGraphicsImageRenderer(size: emojiSize).image { context in
            backgroundColor.setFill()
            context.fill(CGRect(origin: .zero, size: emojiSize))
            self.draw(at: .zero, withAttributes: [.font: font])
        }
    }
}

Convert Apple Emoji (String) to UIImage

9 Answers9

Updated for Swift 4.1

Example

Swift 4.2

Linked