js根据名字生成头像图片

说明：

• 根据canvas大小动态调整字体大小，确保文字能完全显示

代码示例：

/**
 * 生成头像图片
 * @param name - 姓名
 * @param avatarSize - 头像宽高
 * @param bgColor - 背景颜色
 * @param fontColor - 文字颜色
 * @param enLength - 英文字符时要截取的长度
 * @returns
 */
function generateAvatar(
  name,
  avatarSize,
  bgColor,
  fontColor,
  enLength
) {
  // 根据姓名长度设置要显示的文字
  let displayName;
  // 如果是中文：名字长度>=3，取后两个字，不足3个则全显示
  if (/^[\u4e00-\u9fa5]+$/.test(name)) {
    if (name.length >= 3) {
      displayName = name.substring(name.length - 2); // 名字长度大于等于3的，取后两个字
    } else {
      displayName = name; // 名字长度小于3的，全部显示
    }

    // 如果是英文：按照传入的字符长度截取显示，不足截取的长度则全显示
  } else {
    if (enLength && name.length > enLength) {
      displayName = name.substring(0, enLength);
    } else {
      displayName = name;
    }
  }

  // 创建一个新的canvas元素
  const canvas = document.createElement("canvas");
  canvas.width = avatarSize;
  canvas.height = avatarSize;
  const ctx: any = canvas.getContext("2d"); // 获取2D绘图上下文
  ctx.imageSmoothingEnabled = true;
  ctx.fillStyle = bgColor; // 设置背景色
  ctx.fillRect(0, 0, avatarSize, avatarSize);
  ctx.fillStyle = fontColor; // 设置文字颜色

  // 根据canvas大小动态调整字体大小，确保文字能完全显示
  const maxFontSize = avatarSize * 0.4;
  let fontSize = maxFontSize;
  ctx.font = `${fontSize}px 'Helvetica Neue', Helvetica, 'PingFang SC'`;
  let textWidth = ctx.measureText(displayName).width;
  while (textWidth > avatarSize * 0.9) {
    fontSize = fontSize * 0.9;
    ctx.font = `${fontSize}px 'Helvetica Neue', Helvetica, 'PingFang SC'`;
    textWidth = ctx.measureText(displayName).width;
  }

  // 计算文字的水平和垂直位置，添加间距
  const textX = avatarSize / 2;
  const textY = avatarSize / 2;
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillText(displayName, textX, textY); // 在canvas中心绘制文字

  // 将canvas转换为data URL
  return canvas.toDataURL("image/png");
}