随机生成的头像

今天药忘吃喽~ 2024-03-17 22:30 65阅读 0赞

### 图像格式 ###

您应该考虑的第一件事是图像格式，通常是以下之一：

Jpeg：由于压缩比高，非常适合真实用户照片。然而，这种压缩也会在线条和锐边上产生一些“模糊”。因此，这对于我们要制作的化身来说并不理想。

PNG：这些具有无损压缩。换句话说，每个像素都与最初绘制时完全相同。边缘和线条保持“锋利”。

SVG：这些是可缩放矢量图形。与“像素光栅”不同，它是一种描述形状和路径的声明性格式。

当然，您也可以将其保存为“100% 质量”Jpeg 以避免任何质量损失，但它比 PNG 更大。对于普通照片来说，Jpeg 压缩效果非常惊人。

在我们的例子中，我们为即将推出的头像图片选择了 SVG。过去，SVG 被避免使用，因为并非所有软件平台都能得到很好的支持。然而，这很大程度上已经成为过去。

SVG 具有多项优点：首先是可扩展性。由于其矢量性质，即使在 4K 显示屏上放大，它在任何比例下都非常清晰。其他“光栅”格式（如 Jpeg 或 PNG）在放大时会变得“像素化”。另一种格式则更加紧凑。Jpeg/PNG 的字节大小随图片大小而增长，而 SVG 则与形状的复杂性成比例增长。对于像这里的头像这样相对简单的东西，它们非常紧凑。

### SVG“模板” ###

SVG 是一种描述形状的 XML 格式。因此，将生成一个大的 XML 字符串。更准确地说，我们将使用适当的值填充下面的模板。

一旦该模板填充了有意义的值，您将获得一个头像 SVG 图像，该图像可以存储为普通的“.svg”文件。

或者，您也可以将其作为“数据 URL”传递，因为它非常紧凑。这仅仅意味着直接对资源进行编码，而不是通过“纯 URL”来获取它。它由两部分组成：mime 类型（image/svg+xml在本例中）和（base64 编码）数据。

src这可以像图像标签中的任何其他 URL 一样使用，如下所示：<img src= “data: image/svg+xml;base64,\{ \{the-base64-encoded-svg\}\}”

瞧，你的形象就出来了！

获取一些随机值  
现在缺少的步骤是用一些随机值填充此 SVG 模板。或者，如果您想要更具确定性的东西，您也可以使用名称的哈希值。

正如您在 SVG 模板中看到的，没有使用 RGB 颜色，而是使用了HSL 颜色。这代表色相-饱和度-亮度。这使得可以轻松地从所有彩虹色中生成明亮的颜色，并具有最大的颜色饱和度和平均的“亮度”。

// Gradient colors
      const startHue = Math.round(Math.random() * 360);
      const endHue   = Math.round(Math.random() * 360);
    
      // Gradient direction
      const angle = Math.random() * 2 * Math.PI
    
      // Calculate the start and end points of the gradient
      const startX = (Math.cos(angle) + 1) / 2;
      const startY = (Math.sin(angle) + 1) / 2;
      const endX = 1 - startX;
      const endY = 1 - startY;
    
      // The character to appear on the avatar
      const char = name.charAt(0).toUpperCase()

对于梯度方向，由于无法直接提供角度，因此有点棘手。有一些可用的“转换”，但为了确保与 SVG 渲染器最广泛的兼容性，坚持基础知识似乎是一个安全的选择。这样，角度就会转换为渐变的起始和结束坐标。