Minidenticons

超轻量级 SVG 身份图标生成器。无依赖。

压缩并使用 brotli 的大小压缩并使用 zip 的大小 (仅使用 minidenticon() 函数)

压缩并使用 brotli 的大小压缩并使用 zip 的大小 (使用包含的自定义元素)

为什么使用

在客户端从用户名生成身份图标（像素化头像），而不是从服务器获取图像。更快、节省带宽且符合 GDPR。
用易记的图形头像替代单调的初始头像，如 <img src="https://yellow-cdn.veclightyear.com/ab5030c0/0e96c140-02fc-4489-87b7-971e08613d99.svg" alt="laurent 身份图标" width="24" height="24">。
为哈希值或任何 ID 字符串提供可视化表示。

在线演示 :video_game:

在这里试用。

使用包含的自定义元素的基本用法

Minidenticons 使用 ES 模块，现在浏览器已广泛支持。从 minidenticons.min.js 文件中导入 minidenticonSvg 自定义元素。该文件可以位于 CDN（如下例所示）或复制到您网站的任何目录中（以获得更好的性能并符合 GDPR，因为您不需要连接到第三方服务器）。

<script type="module">
  import { minidenticonSvg } from 'https://cdn.jsdelivr.net/npm/minidenticons@4.2.1/minidenticons.min.js'
</script>

然后简单地使用带有 username 属性的 minidenticon-svg 标签 :joy:

<minidenticon-svg username="laurent"></minidenticon-svg>

（请注意，除了空元素外，所有元素都需要闭合标签 </minidenticon-svg>）

例如，使用 laurent 用户名，您将得到以下身份图标（不含边框）：

样式设置

为便于 CSS 样式设置：

Minidenticons 是 SVG 图像，会占用所有可用空间。上面的图片已调整大小。
背景是透明的。
彩色方块矩阵周围有白色空间，以允许未裁剪的圆形头像。

因此，使用以下 CSS：

minidenticon-svg svg {
  border-radius: 50%;
  background-color: grey;
  height: 48px;
  width: 48px;
};

您将得到：

带样式的 minidenticon

默认情况下，颜色饱和度设置为 95%，亮度设置为 45%。但您可以使用 saturation 和/或 lightness 属性更改这些值，例如：

<minidenticon-svg username="laurent" saturation="60" lightness="50"></minidenticon-svg>

在演示中尝试，找到与您网站主题颜色（浅色、深色或其他）匹配的饱和度和亮度组合 :sunglasses:

Minidenticons 浅��色 Minidenticons 深色 Minidenticons 奇怪

性能

自定义元素身份图标是记忆化的（存储在内存中，无需重新计算）。
要查看您的浏览器生成 100 个身份图标自定义元素（适用于大页面）需要多长时间，请尝试在线浏览器基准测试。

使用 `minidenticon()` 函数的高级用法

除了使用自定义元素外，您还可以使用 minidenticon() 函数在客户端（或服务器）生成 SVG 字符串。

minidenticon(seed: string, saturation?: number|string, lightness?: number|string, hashFn?: (str: string) => number): string

minidenticon() 函数将返回根据其种子字符串参数生成的 SVG 字符串。种子参数可以是用户名，但实际上可以是任何用作标识符的字符串。

可选的饱和度和亮度参数应为百分比；即介于 0 和 100 之间的数字（或字符串）。

如果需要，您可以在第四个参数（可选）中使用自己的哈希函数。您的自定义哈希函数必须接受一个字符串并返回一个数字。哈希的整数部分的最后 15 位将用于绘制方块。包含的自定义元素不使用此最后一个参数。

请注意，minidenticon() 函数本身未进行记忆化。

NodeJS

请确保使用的 NodeJS 版本大于或等于 15.14.0。

安装

npm install minidenticons

导入

import { minidenticon } from 'minidenticons'

minidenticonSvg 自定义元素应该从你的bundle中进行树摇,以获得更小的 minidenticons 大小 :grin:

性能

minidenticon() 函数非常快。你可以在 Minidenticons git 克隆的根目录运行 node benchmark/node 自己查看。在我的机器上得到以下结果:

为15个字符的随机种子生成10000个 minidenticon SVG 字符串的时间:
8毫秒(10次运行平均)

React

以下 React 组件示例将 identicon 插入到 img 标签的 src 属性中。它还使用了 React 的 useMemo 来记忆 identicon。

import { minidenticon } from 'minidenticons'
import { useMemo } from 'react'

const MinidenticonImg = ({ username, saturation, lightness, ...props }) => {
  const svgURI = useMemo(
    () => 'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(username, saturation, lightness)),
    [username, saturation, lightness]
  )
  return (<img src={svgURI} alt={username} {...props} />)
}

然后你可以将这个组件与 img 属性(如 width 和 height)以及 minidenticons 的属性一起使用。除 username 外,所有属性都是可选的。

<MinidenticonImg username="laurent" saturation="90" width="150" height="150" />

有关此示例的 TypeScript 版本,请参阅 Dan Yishai 的原始问题评论。

Workbox

在这个使用 Workbox 的示例中,路径以 minidenticons/<username>.svg 结尾的图像由 service worker 生成,并缓存一年。

import { minidenticon } from 'minidenticons'
import { registerRoute } from 'workbox-routing'

registerRoute(
  /minidenticons\/[^\/]+\.svg$/,
  async ({ url }) => {
    const username = url.pathname.match(/([^\/]+)\.svg$/)[1]
    return new Response(
      minidenticon(username),
      { headers: { "Content-Type": "image/svg+xml", "Cache-Control": "max-age=31536000" } }
    )
  }
)

Rust

Théo Battrel 制作了 Minidenticons 的 Rust 版本: minidenticons-rs。

Elm

对于 Elm 爱好者,Elm 包仓库中有一个 Minidenticons 包: minidenticons-elm。

碰撞

对于给定的用户名,你总会得到相同的 identicon。但不同的用户名有可能得到相同的 identicon。这就是碰撞。

生成的 identicons 是具有垂直对称性的 5×5 矩阵,对于相同的饱和度和亮度可以有 9 种不同的色调。这意味着可能有 2(3×5) × 9 = 294,912 种不同的 identicons,但在使用大量 identicons 时,重复是不可避免的。这应该不是问题,因为 identicons 不应该单独用于识别用户,而应该始终与唯一的用户名结合使用 :wink:

下面的 npm test 命令结果显示,在已经使用 10,000 个 identicons 的情况下,生成重复 identicon 的几率不到 2%。

0 collisions out of 100 (0.00%)
0 collisions out of 200 (0.00%)
0 collisions out of 300 (0.00%)
0 collisions out of 400 (0.00%)
0 collisions out of 500 (0.00%)
0 collisions out of 600 (0.00%)
0 collisions out of 700 (0.00%)
0 collisions out of 800 (0.00%)
1 collisions out of 900 (0.11%)
1 collisions out of 1000 (0.10%)
8 collisions out of 2000 (0.40%)
14 collisions out of 3000 (0.47%)
22 collisions out of 4000 (0.55%)
37 collisions out of 5000 (0.74%)
58 collisions out of 6000 (0.97%)
75 collisions out of 7000 (1.07%)
99 collisions out of 8000 (1.24%)
129 collisions out of 9000 (1.43%)
163 collisions out of 10000 (1.63%)