使用 JavaScript 构建用户个人资料头像生成器🧑👩‍💻

让我们来看看如何使用客户端 JavaScript 生成 Web 端的用户头像。所需的工具包括 HTML5 Canvas 和 Data URL 🙂

这将减少您对服务器端的请求数量，从而加快您的加载时间⚡

视频教程

与我通常的帖子一样，如果您更喜欢观看此视频教程，请在我的 YouTube 频道dcode上观看：

源代码

如果您喜欢遵循较长的代码，请参见以下代码：

编写 HTML

对于 HTML，我们只需要一个图像标签来（最终）保存头像。



<img id="avatar" alt="Avatar">

还有 JavaScript...

这将在单一函数上起作用，该函数包含几个选项，包括要显示的文本、前景色和背景色。



function generateAvatar(text, foregroundColor, backgroundColor) {
    const canvas = document.createElement("canvas");
    const context = canvas.getContext("2d");

    canvas.width = 200;
    canvas.height = 200;

    // Draw background
    context.fillStyle = backgroundColor;
    context.fillRect(0, 0, canvas.width, canvas.height);

    // Draw text
    context.font = "bold 100px Assistant";
    context.fillStyle = foregroundColor;
    context.textAlign = "center";
    context.textBaseline = "middle";
    context.fillText(text, canvas.width / 2, canvas.height / 2);

    return canvas.toDataURL("image/png");
}

在第一段代码中，我们执行画布的标准程序，创建一个新的画布来绘制并获取 2D 上下文。

接下来我们将宽度和高度设置为相同的值。

之后，我们首先在上下文上设置活动填充颜色，然后用全宽矩形来表示背景，从而绘制背景。

接下来是文本，我们只需设置字体系列，并将文本垂直和水平居中即可。然后使用将其绘制到画布上fillText。

最后，我们返回画布本身的 PNG 图像的数据 URL。调用该函数后，我们可以将数据 URL 放在标签src的属性中：<img>



document.getElementById("avatar").src = generateAvatar("SP", "white", "#009578");

以下是我们得到的结果：

很简单，现在你可以在客户端生成头像了😎

鏂囩珷鏉ユ簮锛�https://dev.to/dcodeyt/build-a-user-profile-avatar-generator-with-javascript-436m