Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make emoji symbols grayscale in UILabel

I would like to use Apple's built-in emoji characters (specifically, several of the smileys, e.g. \ue415) in a UILabel but I would like the emojis to be rendered in grayscale.

I want them to remain characters in the UILabel (either plain text or attributed is fine). I'm not looking for a hybrid image / string solution (which I already have).

Does anyone know how to accomplish this?

like image 227
DrewInTheMountains Avatar asked Apr 01 '13 18:04

DrewInTheMountains


People also ask

Will Apple reject the app If I use Unicode characters to display emojis?

will apple reject the app if you use this unicode characters to display emojis? In xcode just go to the top bar and click EDIT > EMOJIS & SYMBOLS and an emoji box will pop up and you can literally add it to any text in the app, even works in the interface builder if you need to add it to the text of a uilabel there.

How to add text to emoji?

Emoji Text is the function that add text to emoji. Emoji Maker Online give you a professional tool allows you to create and edit text with all the necessary functions. You need to enter text, select a beautiful font, edit text size, text color, text style... and see...

What are emojis?

What are Emojis? Emojis look like images, or icons, but they are not. They are letters (characters) from the UTF-8 (Unicode) character set. UTF-8 covers almost all of the characters and symbols in the world. To display an HTML page correctly, a web browser must know the character set used in the page. This is specified in the <meta> tag:

How to make custom emoji shapes?

Emoji Maker Online has many emoji shapes for you. Emoji Shapes such as: Common Emoji Shapes, Animal Shapes, People Shapes... Choose a shape then start designing it with many emoji components. Select the emoji component in the left panel and edit it in the editor panel on the right.


1 Answers

I know you said you aren't looking for a "hybrid image solution", but I have been chasing this dragon for a while and the best result I could come up with IS a hybrid. Just in case my solution is somehow more helpful on your journey, I am including it here. Good luck!

import UIKit
import QuartzCore

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // the target label to apply the effect to
        let label = UILabel(frame: view.frame)
        // create label text with empji
        label.text = "🍑 HELLO"
        label.textAlignment = .center
        // set to red to further show the greyscale change
        label.textColor = .red
        // calls our extension to get an image of the label
        let image = UIImage.imageWithLabel(label: label)
        // create a tonal filter
        let tonalFilter = CIFilter(name: "CIPhotoEffectTonal")
        // get a CIImage for the filter from the label image
        let imageToBlur = CIImage(cgImage: image.cgImage!)
        // set that image as the input for the filter
        tonalFilter?.setValue(imageToBlur, forKey: kCIInputImageKey)
        // get the resultant image from the filter
        let outputImage: CIImage? = tonalFilter?.outputImage
        // create an image view to show the result
        let tonalImageView = UIImageView(frame: view.frame)
        // set the image from the filter into the new view
        tonalImageView.image = UIImage(ciImage: outputImage ?? CIImage())
        // add the view to our hierarchy
        view.addSubview(tonalImageView)
    }
}

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!
    }
}
like image 190
Brian Trzupek Avatar answered Oct 23 '22 03:10

Brian Trzupek