PHP function imagettftext() to write text with smileys

Asked 4/9, 2015 at 5:56 Answered 22/11, 2016 at 6:20

I am using imagettftext function to write text on image but my text contain smileys and it replace smileys to square box

Here is mycode:

$black = imagecolorallocate ( $main_img, 0x00, 0x00, 0x00 );
$font_path = "Arial.ttf";
imagettftext ( $main_img, 14, 0, 73, 685, $black, $font_path, $text );

Text Sample:

test testt😘 Hello 👋💐 Those 👏  Mega x 👊❤️  Graphic 💋

I have tried with changing font which is "Arial Unicode" but its not solved issue.

How can i solve this issue?

Thanks in advance.

Anyway answered 4/9, 2015 at 5:56 Comment(4)

Have you checked if the font you are trying to use has characters for the unicode ranges you try to print? – Octamerous 4/9, 2015 at 7:1

yeah unicode range is supported by font but don't know about emoji – Anyway 4/9, 2015 at 7:18

is it require emoji library or anything else to display? – Anyway 4/9, 2015 at 7:33

@MarkusMüller: Do you suggest any font which support emojis for testing? – Anyway 4/9, 2015 at 9:19

Firstly, we need to understand how emojis are implemented:

Apple’s PNG images (SBIX table)

Apple implemented it using a proprietary, unpublished extension of the TrueType/OpenType specification to add PNG images to a font. These PNG images are then displayed within running text. Google also implemented similar thing, but it is not compatible with Apple’s solution.

Mozilla and Adobe’s SVG (SVG table).

These two web giants got together for the most ambitious format: SVG in OpenType. Instead of mapping a Unicode char to a glyph, we map it to an SVG image. This brings us all the lovely extra’s of SVG, including gradients, embedded bitmap images and even animation. It’s already been supported in Firefox since version 26!

Microsoft COLR/CPAL

By default, the new Segoe UI Emoji font behaves like a regular TrueType/OpenType font. It has Unicode-encoded, uncolored “base glyphs”. But there are two additional tables in the font: the COLR table links additional glyphs as layers to the base glyphs and defines the order of these layers. And the CPAL (“Color Palette”) table stores one or more color palettes for the individual layers. (The different color palettes are useful for displaying the font on dark and light backgrounds.) So when there is support for this new color feature, the base glyphs will be replaced with the colored layers.

Google’s PNG images (CBDT/CBLC tables).

Google proposed an implementation which uses PNG images for the glyphs. The glyphs are simply replaced by good old images. This works fine for smaller icons, and obviously brings all the creative freedom of bitmap images, but doesn’t scale very well. Blow up a glyph big enough, and you’ll encounter blurred pixels. It’s also going to be hard, if not impossible, to change the color of the glyphs with CSS. Interesting is that they specify that there should be no GLYF table in their implementation — the table that holds the uncolored “normal” glyphs — so it looks like there’s no fallback for when this format isn’t supported. It’s already implemented in FreeType, which is used on Android and Linux, but a proposal for OpenType would bring this to Windows and Apple machines as well.

Sources: 1 and 2

The last approach is what we are interested in. This is because imagefttext is function provided by PHP GD extension. And GD internally uses FreeType library to draw text.

Emojis are supported in FreeType since version 2.5. Try executing php -i command to see what version of FreeType do you have. This is mine:

FreeType Support => enabled
FreeType Linkage => with freetype
FreeType Version => 2.5.2

However, after trying with some sample fonts I found here, PHP keeps throwing warning:

Warning: imagefttext(): Could not set character size

I'm afraid that GD library doesn't support FT_LOAD_COLOR flag. This flag is required to have colored emojis. See FreeType changelog:

2013-05-23  Behdad Esfahbod  

    Add support for color embedded bitmaps (eg. color emoji).

    A new load flag, FT_LOAD_COLOR, makes FreeType load color
    embedded-bitmaps, following this draft specification

      https://color-emoji.googlecode.com/git/specification/v1.html

To answer your question: you can't have colored smileys using imagefttext. I'm sorry 😉.

Edit:

You can't also draw black and white emojis in GD. This is because GD supports only 1-3 multibyte UTF-8 characters. Emojis characters range belongs to 4 byte UTF-8 characters.

Source: https://github.com/libgd/libgd/blob/master/src/gdft.c#L341

Emojis table with multibyte UTF-8 representation: http://apps.timwhitlock.info/emoji/tables/unicode

Unrest answered 8/9, 2015 at 20:1 Comment(3)

I dont want to use colored smileys but can i display smileys rather than hollow square? – Anyway 9/9, 2015 at 5:21

@BhumiShah, I edited my answer. It's also impossible, until GD library is fixed. – Unrest 9/9, 2015 at 12:45

is it possible to get emoji using imagick rather than gd function? – Anyway 10/9, 2015 at 9:5

I suggest You using PHP ImageMagick library. Though I didn't try it with emoji I'we encountered the same problem as yours with other Unicode characters when tried to render text with DG.

BTW migrating to IM is good idea at least because of better performance and less quirks in it.

Here is an example that should work for You

Vonvona answered 12/9, 2015 at 19:16 Comment(0)

Try using a font with known emoji unicode characters. Like Symbola

Biathlon answered 7/9, 2015 at 13:50 Comment(3)

Could you provide string you try to draw? – Biathlon 8/9, 2015 at 10:25

I've been testing Symbola, and some characters are working fine, like ☕, but others not really. I think it's just a case of trial and error to find a font with support you require – Biathlon 8/9, 2015 at 10:34

I have added sample text above.Also can you provide me demo – Anyway 8/9, 2015 at 10:41

Can you post which smiley's are you trying to use? It would be best if you could give us codes that you can see in windows charmap after selecting a smiley. In Arial I have found only these smiley's: ☺☻☼♀♂♠♣♥♦♪♫♯ - they all show up without any problems. I used example from php.net

Brinna answered 8/9, 2015 at 10:43 Comment(2)

I am fetching data from instagram, so need generic solution for all emojis.can you provide me link or example you tried from php.net? Have you tried to display those smileys on image? – Anyway 8/9, 2015 at 10:51

I tried this example: php.net/manual/en/function.imagettftext.php but from what I see I can't use some symbols you posted. I think it's a font and/or encoding related problem. Are your scripts encoded in utf-8? Is PHP working with default encoding set to utf-8? – Brinna 8/9, 2015 at 11:10

Here's my suggestion:

Use this to generate the colored nice looking emojis (select output .png) http://git.emojione.com/demos/latest/phpunicodetoimage.php#output
Use imagettftext and Arial.ttf for the remaining text
Append all the .png using Imagick::appendImages

Contraband answered 22/11, 2016 at 6:20 Comment(0)

Edit:

Recommended topics

Hot tags