有没有办法根据用户的名称生成图像，如使用网络语言的iOS7收藏夹？

Question

在iOS7收藏夹的此屏幕截图中，当特定用户不存在照片时，将使用所述联系人的姓名首字母显示占位符图像。

有没有办法在网上这样做？像lorempixel这样的服务？或者这可以使用图像库以网络语言完成吗？

我希望这些图片可以是正方形或圆形，其中包含用户的首字母。

我正在Laravel中创建一个项目，我知道它内置了一些图像处理工具，PHP有一个GD库。

Answer 1

是。您可以使用True Type字体从字符串生成图像。

示例借鉴于：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);
?>

结果将是：

Answer 2

如果您不想重新发明轮子，现在我们有一些库可以完成此任务。

Avatar：是一个JavaScript库，用于显示Gravatars或生成用户头像。这提供了许多在前端上完成任务的选项。

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模块和Express中间件，用于生成在后端中带有缩写的头像图像。您需要做的是使用选项选择文本，颜色和图像大小来构建对象。

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