Wsrtjtyk

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.

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:

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);

});