100-days-Coding - day6

day6-0731

经常见到一些网站，例如github, gitee, 使用名字的首字母或是第一个汉字，来作为用户avatar，今天刚好想到，用来优化NGMusicStore中搜索到的音乐

实现思路很简单：

使用canvas

通过canvas来绘制，将内容填充到canvas，然后使用 canvas生成图片 - base64编码格式

  text2img(name: string): string {
    var dataUrl = '';

    var text = name.charAt(0) || 'M';
    var fontSize = 60;
    var fontWeight = '10';

    var context = this.canvas.getContext('2d');

    context.fillStyle = '#F7F7F9'
    context.fillRect(0, 0, this.canvas.width, this.canvas.height);
    context.fillStyle = '#60c598';
    context.font = fontWeight + ' ' + fontSize + 'px sans-serif';
    context.textAlign = 'center';
    context.textBaseline = 'middle';
    context.fillText(text, fontSize, fontSize);

    dataUrl = this.canvas.toDataURL('image/png');

    return dataUrl;
  }

头像示例

需要依旧保持技术敏感度！