Section 1.1: Emojis in Messaging Applications

Most of us regularly use messaging apps like WhatsApp, Telegram, or WeChat, and have likely included emojis like 😊 or 😍 in our conversations. These playful icons belong to the “Segoe UI Emoji” font family, which gives them their distinctive look.

Image by Author | The emojis displayed here illustrate the variation in appearance based on different font rendering.

Given that a vast array of emojis is at our fingertips, it can be beneficial to search within these emojis for images that fit specific themes before scouring platforms like Pixabay or Vecteezy. Alternatively, you can combine multiple emojis to create a unique visual representation (see demo below).

Section 1.2: Creating Unique Emojis

Let’s say I want to convey the idea of a “perfect score”:

1. First, I export the emoji 🏆 as an image.

Image by Author | This image captures the 🏆 emoji in a resolution of 255px by 255px.

2. Next, I export the emoji 🎯 as an image.

Image by Author | Here is the 🎯 emoji, sized at 155px by 155px.

3. Finally, I merge both images to illustrate the concept of “perfect score”:

Image by Author | The combination of 🏆 and 🎯 effectively communicates the theme of a “perfect score”.

For instructions on how to resize images, refer to the following article (link to an offline tool included).

Step 1: Set Up the HTML Canvas

var _scale = window.devicePixelRatio * 2;

var w = 96, h = 96, fontSize, _x, _y;

var canvas = document.createElement('canvas');

canvas.width = w;

canvas.height = h;

fontSize = h / _scale;

canvas['style']['margin'] = '1px auto';

canvas['style']['width'] = ${w / _scale}px;

canvas['style']['height'] = ${h / _scale}px;

var ctx = canvas.getContext('2d');

ctx.scale(_scale, _scale);

When working with Canvas elements, remember to use the correct scaling to avoid low-resolution images.

Step 2: Configure Canvas Properties

ctx.font = ${fontSize}px Segoe UI Emoji; // Set font for emoji rendering

ctx.textAlign = 'center';

ctx.textBaseline = 'middle';

// Additional properties...

ctx.fillStyle = '#ffffff';

_x = ((canvas.width / _scale) / 2);

_y = ((canvas.height / _scale) / 2);

ctx.fillText('😊', _x, _y); // Render emoji

Screenshot by Author | This shows the canvas with the emoji drawn onto it.

Step 3: Export the Canvas as a PNG File

To enable users to download the created image, add a button in the HTML interface:

<button id='saveImageBtn' type='button'>💾 Save as Image</button>

In the accompanying JavaScript, add the following:

var iconData = canvas.toDataURL(); // Base64 encoded image

var saveImageBtn = document.getElementById('saveImageBtn');

saveImageBtn.value = iconData;

saveImageBtn.addEventListener('click', (evt) => {

var dnk = document.createElement('a');

dnk.href = saveImageBtn.value;

dnk.download = output.png;

dnk.click();

}, false);

Demonstration: Exporting the Canvas

Screencapture by Author | This image shows the user selecting the save button to export the canvas image.

Image by Author | Here’s the final 96px by 96px image created from the utility tool.

Feel free to access the complete source code on my GitHub repository — emoji2image — or try the demo!

Thank you for sticking with me through this article! I hope you found it informative. Don’t hesitate to follow me on Medium for more insights into Geographic Information Systems (GIS), Data Analytics, and Web Applications. Your support means a lot!