访问官网
Github
论文Minidenticons
超轻量级 SVG 身份图标生成器。无依赖。
(仅使用
minidenticon() 函数)
(使用包含的自定义元素)
为什么使用
- 在客户端从用户名生成身份图标（像素化头像），而不是从服务器获取图像。更快、节省带宽且符合 GDPR。
- 用易记的图形头像替代单调的初始头像，如
。 - 为哈希值或任何 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 样式设置：
因此，使用以下 CSS：
minidenticon-svg svg {
border-radius: 50%;
background-color: grey;
height: 48px;
width: 48px;
};
您将得到：
默认情况下，颜色饱和度设置为 95%，亮度设置为 45%。但您可以使用 saturation 和/或 lightness 属性更改这些值，例如：
<minidenticon-svg username="laurent" saturation="60" lightness="50"></minidenticon-svg>
在演示中尝试，找到与您网站主题颜色（浅色、深色或其他）匹配的饱和度和亮度组合 :sunglasses:
性能
使用 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%)
