如果使用Canvas找不到图像，则显示名称头像（后备）

Question

如果找不到实际图像，如何显示像Google这样的名字的字母。 ========＆gt;

我更喜欢使用画布创建后备图像的解决方案。

Answer 1

我已经创建了一个解决方案，但我正在寻找更好的解决方案。在这里 从名称

创建回退画布

undefined

使用错误条件处理图像加载

  var username = attr.username;
  var name = attr.name;
  var imgSrc = "https://path/to/server/"+username+".jpg";


  var canvas = document.createElement('canvas'); //es-lint disable
  canvas.width = '32';
  canvas.height = '32';
  var context = canvas.getContext('2d');
  context.fillStyle = "#D6B478";
  context.fillRect(0, 0, canvas.width, canvas.height);
  context.font = "16px 'Roboto'";
  context.fillStyle = "white";
  var nameArr = name.split(' ')
  context.fillText(nameArr[0].charAt(0)+nameArr[1].charAt(0),7,22
  var dataUrl = canvas.toDataURL();

Answer 2

仅限HTML和CSS。添加你想要检测img的方式。

.avatar{
    background: #D770AD;
    padding: 10px;
    width: 32px;
    height: 32px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    line-height: 32px;
    font-weight: 700;
    margin-right: 5px;
    color: #FFFFFF;
  }

<div class="avatar">FL</div>

Answer 3

这是用于使用javascript的图像生成器

var colours = ["#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#34495e", "#16a085", "#27ae60", "#2980b9", "#8e44ad", "#2c3e50", "#f1c40f", "#e67e22", "#e74c3c", "#95a5a6", "#f39c12", "#d35400", "#c0392b", "#bdc3c7", "#7f8c8d"];

    var name = "Samundra Adhikari",
      nameSplit = name.split(" "),
      initials = nameSplit[0].charAt(0).toUpperCase() + nameSplit[1].charAt(0).toUpperCase();

    var charIndex = initials.charCodeAt(0) - 65,
      colourIndex = charIndex % 19;

    var canvas = document.createElement('canvas'); //es-lint disable
    canvas.width = '32';
    canvas.height = '32';
    var context = canvas.getContext("2d");
    context.fillStyle = colours[colourIndex];
    context.fillRect (0, 0, canvas.width, canvas.height);
    context.font = "16px Arial";
    context.textAlign = "center";
    context.fillStyle = "#FFF";
    context.fillText(initials,16,22);
    var dataUrl = canvas.toDataURL();
    return dataUrl;