Is there a way to generate an image based on the user's name like iOS7 Favourites using a web language?

Question

iOS7 Favourites

In this screenshot of iOS7 Favourites, when a photo doesn't exist for a particular user, a placeholder image is displayed using the initials of said contact.

Is there a way to do this for the web? A service like lorempixel? Or can this be done in a web language using an image library?

I would like the images to either be square or a circle with the user's initials inside.

I am creating a project in Laravel and I know that it has some image manipulation facilities built in and PHP has a GD library.

score 3 · Answer 1 · answered Apr 18 '14 at 16:12

Yes.You can generate an image from string using True Type fonts.

Example borrowed from: http://www.php.net/manual/en/function.imagettftext.php

<?php
// Set the content-type
header('Content-Type: image/png');

// Create the image
$im = imagecreatetruecolor(400, 30);

// Create some colors
$white = imagecolorallocate($im, 255, 255, 255);
$grey = imagecolorallocate($im, 128, 128, 128);
$black = imagecolorallocate($im, 0, 0, 0);
imagefilledrectangle($im, 0, 0, 399, 29, $white);

// The text to draw
$text = 'Testing...';
// Replace path by your own font path
$font = 'arial.ttf';

// Add some shadow to the text
imagettftext($im, 20, 0, 11, 21, $grey, $font, $text);

// Add the text
imagettftext($im, 20, 0, 10, 20, $black, $font, $text);

// Using imagepng() results in clearer text compared with imagejpeg()
imagepng($im);
imagedestroy($im);
?>

The result will be:

enter image description here

Thank you. Is there a way to generate these images and save them to an appropriate file so that I can reference them later. I want one for each letter A-Z and for each two letter combo AA-ZZ? — Michael, Apr 18 '14 at 16:44
@Mike, yes you can, in that code just remove "header('Content-Type: image/png');" and edit imagepng funtion, add imagepng($im, "filename.png"); — kraysak, Apr 19 '14 at 03:14

Marcos Leonel · Answer 2 · 2018-11-10T23:37:14.613

If you don't want o reinvent the wheel, now we have some libraries to do this task.

Avatar: is a JavaScript library for showing Gravatars or generating user avatars. This one provides a plenty of options to do the task in the front end.

import Avatar from 'avatar-initials';

const avatar = new Avatar(document.getElementById('avatar'), {
  useGravatar: true, // Allow Gravatars or not.
  fallbackImage: '', // URL or Data URI used when no initials are provided and not using Gravatars.
  size: 80,          // Size in pixels, fallback for hidden images and Gravatar

  // Initial Avatars Specific
  initials: '',          // Initials to be used.
  initial_fg: '#888888', // Text Color
  initial_bg: '#f4f6f7', // Background Color
  initial_size: null,    // Text Size in pixels
  initial_weight: 100,   // Font weight (numeric value for light, bold, etc.)
  initial_font_family: "'Lato', 'Lato-Regular', 'Helvetica Neue'",

  // Gravatar Specific
  hash: null,                   // Precalculated MD5 string of an email address
  email: null,                  // Email used for the Gravatar
  fallback: 'mm',               // Fallback Type
  rating: 'x',                  // Gravatar Rating
  forcedefault: false,          // Force Gravatar Defaults
  allowGravatarFallback: false, // Use Gravatars fallback, not fallbackImage

  // GitHub Specific
  github_id: null,  // GitHub User ID.

  // Avatars.io Specific
  use_avatars_io: false, // Enable Avatars.io Support
  avatars_io: {
    user_id: null,       // Avatars.io User ID
    identifier: null,    // Avatars.io Avatar Identifier
    twitter: null,       // Twitter ID or Username
    facebook: null,      // Facebook ID or Username
    instagram: null,     // Instagram ID or Username
    size: 'medium',      // Size: small, medium, large
  },

  setSourceCallback: null, // Callback called when image source is set (useful to cache avatar sources provided by third parties such as Gravatar)
});

No Avatar: Node.js Module and Express middleware to generate avatar image with initials in the back end. What you have to do is to build an object with options to choose text, colors and size of the image.

const { save } =  require('no-avatar');
const savePath = __dirname + '/avatar.png';
const options = {
    width: 150,
    height: 150,
    text: userInitials,
    bgColor: 000000,
    fontColor: FFFFFF,
    fontSize: 60
};

save(savePath, options, function(err){
    if(err) return console.log(err);
            return console.log('avatar.png saved at path ' + savePath);
});

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/low-quality-posts/21378023) — Taha Paksu, Nov 10 '18 at 20:14
I edited my answer with more details. However, it depends on the libraries from the links to work. — Marcos Leonel, Nov 10 '18 at 23:41

Is there a way to generate an image based on the user's name like iOS7 Favourites using a web language?

2 Answers2