拓冰网站定制 
UI组件后端【免费下载链接】dicebearDiceBear is an avatar library for designers and developers. 项目地址https://gitcode.com/gh_mirrors/di/dicebear点击查看免费下载Constellation 是 DiceBear 提供的一款「星图」头像风格把几颗亮星连接成星座铺在夜空背景上再点缀零散的背景星与偶尔划过的彗星。本文以仓库内该风格的 风格页面 与 预设页面 为主体结合 核心选项文档、HTTP API 文档 与仓库内的真实预设数据带你掌握通过 URL 一键生成、用 JavaScript 库集成、微调配色与开启内置动画的完整方法读完即可在自己的产品中落地一致的星图头像。Constellation把亮星连成夜空星图根据仓库中的风格页面描述Constellation 风格的画面是A few bright stars connected into a star map on a night sky, with scattered background stars and the occasional comet.即在夜空中将少数明亮的星星连线组成星图背景散布着零星的星点偶尔还会出现一颗彗星。相比 DiceBear 中大量以人物adventurer、lorelei 等为主体的风格Constellation 属于图案化 / 自然主题风格没有五官、发型等人物组件画面要素是「星星连线 夜空底色」因此它的可调项集中在**背景色backgroundColor与星座线条颜色constellationColor**上这一点可以从仓库中该风格的预设配置得到印证见下文预设部分。风格名在 API 中写作小写constellation多词风格用连字符与官方 风格索引 的命名约定一致仓库的 CHANGELOG.md 也把constellation列入官方风格清单其风格定义与其余风格一样以 JSON 形式随dicebear/styles包发布。通过 HTTP API 生成星图头像HTTP API 是使用 DiceBear 最轻量的方式无需鉴权把风格名拼进 URL 即可。基础用法把styleName替换为constellation请求 SVGhttps://api.dicebear.com/11.x/constellation/svgAPI 同时支持 PNG、JPG、WebP、AVIF 等栅格格式只需把路径中的svg换成对应后缀例如https://api.dicebear.com/11.x/constellation/png根据 HTTP API 文档栅格格式PNG/JPG/WebP/AVIF目前最大输出 256×256 pxSVG 则无尺寸上限因此官方推荐优先使用 SVG。用 seed 固定同一片星空星图由 PRNG伪随机数生成器驱动传入稳定的seed即可让同一个用户始终拿到同一张星图——这是把头像用作默认头像用户未上传照片时的占位的典型做法https://api.dicebear.com/11.x/constellation/svg?seeduser-8f3a2c如果 seed 中包含空格或特殊字符需要先做 URL 编码。其它核心选项作为查询参数所有 核心选项 都可以通过查询参数传入多个参数用连接https://api.dicebear.com/11.x/constellation/svg?seedOrionrotate90scale1.2backgroundColor0a0b12constellationColoreaf2ff数组类参数用逗号分隔例如constellationColoreaf2ff,d8e6f5枚举类参数直接传字符串例如fliphorizontal公开 API 上idRandomization、fontFamily、fontWeight、title四个选项不支持需要自托管实例才能启用参见 自托管指南。通过 JavaScript 库生成如果要在 Node.js 或浏览器项目里离屏生成头像使用dicebear/core即可无需依赖公网 API。安装npm install dicebear/core按 JavaScript 核心库 README 的说明该包要求 Node.js 22 或任意现代浏览器。最小示例import { Avatar, Style } from dicebear/core; // 从 dicebear/styles 包引入星座风格定义JSON import definition from dicebear/styles/constellation.json with { type: json }; const avatar new Avatar(new Style(definition), { seed: Orion, size: 128, }); avatar.toString(); // SVG 字符串 avatar.toDataUri(); // data:image/svgxml;charsetutf-8,...其中definition正是风格定义 JSON——仓库的 预设渲染脚本 也是按dicebear/styles/${styleName}.json的路径加载各风格定义与上述用法一致。复用同一个 Style 生成多个头像同一个风格实例可以生成任意数量的头像只需换 seedimport { Style, Avatar } from dicebear/core; const style new Style(definition); const avatar1 new Avatar(style, { seed: Alice }); const avatar2 new Avatar(style, { seed: Bob });同一个 seed 下JavaScript 库与 HTTP API以及 PHP、Python、Rust、Go、Dart、C# 各语言实现共享同一套 PRNG 与渲染管线输出完全一致的 SVG——这是 DiceBear 各语言实现的一致性承诺。Constellation 风格的专属配色与通用核心选项风格专属颜色组constellationColor从 星座风格预设 可以看到该风格可用的颜色组除了通用背景外还有专属的constellationColor星座线条 / 亮星颜色。它的取值语法与所有动态颜色组一致选项模式类型说明constellationColorstring \| string[]覆盖星座线条与亮星配色十六进制#可选backgroundColorstring \| string[]夜空背景色#RGB到#RRGGBBAA例如在库中传入一组候选色让 PRNG 随机挑选const avatar new Avatar(new Style(definition), { seed: Cassiopeia, constellationColor: [eaf2ff, d8e6f5, 00e5ff], backgroundColor: [07080d, 0a0b12], });核心选项一览下表汇总 核心选项文档 中与 Constellation 风格直接相关的常用选项所有风格通用选项类型默认值说明seedstring确定性生成的种子flipnone \| horizontal \| vertical \| bothnone翻转头像可传数组随机化rotatenumber \| [min, max]0旋转角度−360 到 360scalenumber \| [min, max]1围绕画布中心的比例缩放0 到 10borderRadiusnumber \| [min, max]0圆角画布百分比0 到 50sizeinteger未设置输出像素尺寸1 到 4096backgroundColorstring \| string[]未设置背景色可用于任何风格tagsstring \| string[]未设置按标签过滤变体category/category:value!前缀表示排除animationbooleanfalse播放风格内置动画默认关闭传入[min, max]形式的范围时PRNG 会在该区间内按 seed 取样从而让同一组选项因 seed 不同而产出不同结果。官方预设从开箱即用到继续微调根据 预设页面 的说明预设就是一组普通的渲染选项ordinary set of render options你可以直接复制进代码也可以丢进 Playground 继续调整预设没有触碰的选项会继续随 seed 变化因此每个预设仍能派生出大量不同的头像。仓库中该风格的真实预设数据位于 constellation.json共 7 个预设全部可在 HTTP API 或 JS 库中直接使用预设效果选项配置Deep Space接近纯黑冷白色星星backgroundColor: [07080d,0a0b12]、constellationColor: [eaf2ff,d8e6f5]Warm Night棕紫色夜空配琥珀色星backgroundColor: [2a1c2b,2e1f24]、constellationColor: [f2d9a8,e9c98c]Blueprint平面蓝底上的浅色线条backgroundColor: [12395c]、constellationColor: [dbe9f7]Greyscale灰底白星只留几何backgroundColor: [1c1c1f]、constellationColor: [f0f0f2]Daylight浅色天空配深色星backgroundColor: [eef2f7,e8eef5]、constellationColor: [2a3550]Electric纯黑底上的霓虹星backgroundColor: [07080d]、constellationColor: [00e5ff,ff2e88,7cff00]Animated打开风格内置动画animation: true以「Blueprint」为例在 JS 库中复现const avatar new Avatar(new Style(definition), { seed: Ursa, backgroundColor: [12395c], constellationColor: [dbe9f7], });注意预设文件中的颜色一律省略了#前缀——DiceBear 的颜色选项允许#可选。这些预设页面本身由仓库的 sync-preset-pages.ts 从同一份 JSON 生成因此「预设 JSON → 文档页面 → 代码复制」之间是单一数据源不会出现文档与代码不一致。内置动画会闪烁的星空Constellation 风格自带**闪烁twinkle**动画。与所有 DiceBear 动画一样默认处于关闭状态需要显式开启const avatar new Avatar(new Style(definition), { seed: Orion, animation: true, });在 HTTP API 中https://api.dicebear.com/11.x/constellation/svg?seedOrionanimationtrue进一步的控制方式来自 核心选项文档 与「Animated」预设的说明只播放闪烁动画twinkleAnimation: true按动画名命名的开关优先级高于animation调节节奏animationSpeed: 2表示两倍速0.1 到 10也可用twinkleAnimationSpeed单独控制该动画错峰启动animationDelay: [0, 5]让每个 seed 从头开始的时间点不同多个头像并排时不会齐步闪无障碍动画会尊重prefers-reduced-motion用户在系统中关闭了动态效果时不会播放。需要说明的是动画只有 SVG 输出才会动PNG/JPG/WebP/AVIF 等栅格格式渲染的是静止画面。确定性同一个 seed同一片星空星图连线、背景星的位置分布、颜色的选择顺序全部由 seed 驱动的 PRNG 决定。也就是说相同seed 相同选项 → 始终得到同一张星图改变 seed → 得到布局、星星连线、配色都可能不同的新星图预设中未指定的选项继续随 seed 变化这正是每个预设仍能产出大量不同头像的原因。因此把用户 ID 当作 seed就能让每个人拥有一张「私有」且稳定的星图头像适合作为默认头像 / 占位图使用。仓库中的实现与验证本文内容对应的仓库证据如下可进一步深入星座风格页面风格一句话定位与描述星座预设页面预设概念的官方说明星座预设配置7 个预设的完整选项数据核心选项文档全部选项的类型、默认值与取值范围的权威来源HTTP API 文档URL 约定、查询参数与文件格式JavaScript 核心库 READMEdicebear/core的安装与用法示例预设渲染脚本展示各风格定义按dicebear/styles/${styleName}.json加载的实现方式预设页面同步脚本说明预设页面由预设 JSON 统一生成。综上Constellation 是 DiceBear 生态中一款轻量、纯图案化的头像风格HTTP API 一条 URL 即可接入JavaScript 库提供离线确定性渲染7 个官方预设覆盖从深空、暖夜到霓虹、蓝图的多套配色再加上可选的闪烁动画适合作为用户默认头像、占位图或需要稳定图形的界面元素直接使用。赞分享UI组件后端【免费下载链接】dicebearDiceBear is an avatar library for designers and developers. 项目地址https://gitcode.com/gh_mirrors/di/dicebear点击查看免费下载相关推荐DiceBear Constellation 风格预设指南用现成选项组合快速定制星空头像DiceBear Constellation 风格预设指南用现成选项组合快速定制星空头像 DiceBear 为每个头像风格提供一组“预设Presets”UI组件后端DiceBear Cats 头像风格完全指南HTTP API、JavaScript 库与 CLI 的多端生成实践DiceBear Cats 头像风格完全指南HTTP API、JavaScript 库与 CLI 的多端生成实践 Cats 是 DiceBear 在 11.xUI组件后端DiceBear Blobs 头像风格实战指南同色系有机形状的生成、参数配置与官方预设DiceBear Blobs 头像风格实战指南同色系有机形状的生成、参数配置与官方预设 Blobs 是 DiceBear 提供的一个极简抽象头像风格用同一种UI组件后端上一篇Rocket Redis插件开发指南如何扩展Redis GUI的功能模块下一篇 如何用Inpaint-web免费实现AI图片修复与高清化浏览器端神器教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 用 DiceBear Constellation 风格生成星图头像：HTTP API、JavaScript 库与官方预设实战
UI组件后端【免费下载链接】dicebearDiceBear is an avatar library for designers and developers. 项目地址https://gitcode.com/gh_mirrors/di/dicebear点击查看免费下载Constellation 是 DiceBear 提供的一款「星图」头像风格把几颗亮星连接成星座铺在夜空背景上再点缀零散的背景星与偶尔划过的彗星。本文以仓库内该风格的 风格页面 与 预设页面 为主体结合 核心选项文档、HTTP API 文档 与仓库内的真实预设数据带你掌握通过 URL 一键生成、用 JavaScript 库集成、微调配色与开启内置动画的完整方法读完即可在自己的产品中落地一致的星图头像。Constellation把亮星连成夜空星图根据仓库中的风格页面描述Constellation 风格的画面是A few bright stars connected into a star map on a night sky, with scattered background stars and the occasional comet.即在夜空中将少数明亮的星星连线组成星图背景散布着零星的星点偶尔还会出现一颗彗星。相比 DiceBear 中大量以人物adventurer、lorelei 等为主体的风格Constellation 属于图案化 / 自然主题风格没有五官、发型等人物组件画面要素是「星星连线 夜空底色」因此它的可调项集中在**背景色backgroundColor与星座线条颜色constellationColor**上这一点可以从仓库中该风格的预设配置得到印证见下文预设部分。风格名在 API 中写作小写constellation多词风格用连字符与官方 风格索引 的命名约定一致仓库的 CHANGELOG.md 也把constellation列入官方风格清单其风格定义与其余风格一样以 JSON 形式随dicebear/styles包发布。通过 HTTP API 生成星图头像HTTP API 是使用 DiceBear 最轻量的方式无需鉴权把风格名拼进 URL 即可。基础用法把styleName替换为constellation请求 SVGhttps://api.dicebear.com/11.x/constellation/svgAPI 同时支持 PNG、JPG、WebP、AVIF 等栅格格式只需把路径中的svg换成对应后缀例如https://api.dicebear.com/11.x/constellation/png根据 HTTP API 文档栅格格式PNG/JPG/WebP/AVIF目前最大输出 256×256 pxSVG 则无尺寸上限因此官方推荐优先使用 SVG。用 seed 固定同一片星空星图由 PRNG伪随机数生成器驱动传入稳定的seed即可让同一个用户始终拿到同一张星图——这是把头像用作默认头像用户未上传照片时的占位的典型做法https://api.dicebear.com/11.x/constellation/svg?seeduser-8f3a2c如果 seed 中包含空格或特殊字符需要先做 URL 编码。其它核心选项作为查询参数所有 核心选项 都可以通过查询参数传入多个参数用连接https://api.dicebear.com/11.x/constellation/svg?seedOrionrotate90scale1.2backgroundColor0a0b12constellationColoreaf2ff数组类参数用逗号分隔例如constellationColoreaf2ff,d8e6f5枚举类参数直接传字符串例如fliphorizontal公开 API 上idRandomization、fontFamily、fontWeight、title四个选项不支持需要自托管实例才能启用参见 自托管指南。通过 JavaScript 库生成如果要在 Node.js 或浏览器项目里离屏生成头像使用dicebear/core即可无需依赖公网 API。安装npm install dicebear/core按 JavaScript 核心库 README 的说明该包要求 Node.js 22 或任意现代浏览器。最小示例import { Avatar, Style } from dicebear/core; // 从 dicebear/styles 包引入星座风格定义JSON import definition from dicebear/styles/constellation.json with { type: json }; const avatar new Avatar(new Style(definition), { seed: Orion, size: 128, }); avatar.toString(); // SVG 字符串 avatar.toDataUri(); // data:image/svgxml;charsetutf-8,...其中definition正是风格定义 JSON——仓库的 预设渲染脚本 也是按dicebear/styles/${styleName}.json的路径加载各风格定义与上述用法一致。复用同一个 Style 生成多个头像同一个风格实例可以生成任意数量的头像只需换 seedimport { Style, Avatar } from dicebear/core; const style new Style(definition); const avatar1 new Avatar(style, { seed: Alice }); const avatar2 new Avatar(style, { seed: Bob });同一个 seed 下JavaScript 库与 HTTP API以及 PHP、Python、Rust、Go、Dart、C# 各语言实现共享同一套 PRNG 与渲染管线输出完全一致的 SVG——这是 DiceBear 各语言实现的一致性承诺。Constellation 风格的专属配色与通用核心选项风格专属颜色组constellationColor从 星座风格预设 可以看到该风格可用的颜色组除了通用背景外还有专属的constellationColor星座线条 / 亮星颜色。它的取值语法与所有动态颜色组一致选项模式类型说明constellationColorstring \| string[]覆盖星座线条与亮星配色十六进制#可选backgroundColorstring \| string[]夜空背景色#RGB到#RRGGBBAA例如在库中传入一组候选色让 PRNG 随机挑选const avatar new Avatar(new Style(definition), { seed: Cassiopeia, constellationColor: [eaf2ff, d8e6f5, 00e5ff], backgroundColor: [07080d, 0a0b12], });核心选项一览下表汇总 核心选项文档 中与 Constellation 风格直接相关的常用选项所有风格通用选项类型默认值说明seedstring确定性生成的种子flipnone \| horizontal \| vertical \| bothnone翻转头像可传数组随机化rotatenumber \| [min, max]0旋转角度−360 到 360scalenumber \| [min, max]1围绕画布中心的比例缩放0 到 10borderRadiusnumber \| [min, max]0圆角画布百分比0 到 50sizeinteger未设置输出像素尺寸1 到 4096backgroundColorstring \| string[]未设置背景色可用于任何风格tagsstring \| string[]未设置按标签过滤变体category/category:value!前缀表示排除animationbooleanfalse播放风格内置动画默认关闭传入[min, max]形式的范围时PRNG 会在该区间内按 seed 取样从而让同一组选项因 seed 不同而产出不同结果。官方预设从开箱即用到继续微调根据 预设页面 的说明预设就是一组普通的渲染选项ordinary set of render options你可以直接复制进代码也可以丢进 Playground 继续调整预设没有触碰的选项会继续随 seed 变化因此每个预设仍能派生出大量不同的头像。仓库中该风格的真实预设数据位于 constellation.json共 7 个预设全部可在 HTTP API 或 JS 库中直接使用预设效果选项配置Deep Space接近纯黑冷白色星星backgroundColor: [07080d,0a0b12]、constellationColor: [eaf2ff,d8e6f5]Warm Night棕紫色夜空配琥珀色星backgroundColor: [2a1c2b,2e1f24]、constellationColor: [f2d9a8,e9c98c]Blueprint平面蓝底上的浅色线条backgroundColor: [12395c]、constellationColor: [dbe9f7]Greyscale灰底白星只留几何backgroundColor: [1c1c1f]、constellationColor: [f0f0f2]Daylight浅色天空配深色星backgroundColor: [eef2f7,e8eef5]、constellationColor: [2a3550]Electric纯黑底上的霓虹星backgroundColor: [07080d]、constellationColor: [00e5ff,ff2e88,7cff00]Animated打开风格内置动画animation: true以「Blueprint」为例在 JS 库中复现const avatar new Avatar(new Style(definition), { seed: Ursa, backgroundColor: [12395c], constellationColor: [dbe9f7], });注意预设文件中的颜色一律省略了#前缀——DiceBear 的颜色选项允许#可选。这些预设页面本身由仓库的 sync-preset-pages.ts 从同一份 JSON 生成因此「预设 JSON → 文档页面 → 代码复制」之间是单一数据源不会出现文档与代码不一致。内置动画会闪烁的星空Constellation 风格自带**闪烁twinkle**动画。与所有 DiceBear 动画一样默认处于关闭状态需要显式开启const avatar new Avatar(new Style(definition), { seed: Orion, animation: true, });在 HTTP API 中https://api.dicebear.com/11.x/constellation/svg?seedOrionanimationtrue进一步的控制方式来自 核心选项文档 与「Animated」预设的说明只播放闪烁动画twinkleAnimation: true按动画名命名的开关优先级高于animation调节节奏animationSpeed: 2表示两倍速0.1 到 10也可用twinkleAnimationSpeed单独控制该动画错峰启动animationDelay: [0, 5]让每个 seed 从头开始的时间点不同多个头像并排时不会齐步闪无障碍动画会尊重prefers-reduced-motion用户在系统中关闭了动态效果时不会播放。需要说明的是动画只有 SVG 输出才会动PNG/JPG/WebP/AVIF 等栅格格式渲染的是静止画面。确定性同一个 seed同一片星空星图连线、背景星的位置分布、颜色的选择顺序全部由 seed 驱动的 PRNG 决定。也就是说相同seed 相同选项 → 始终得到同一张星图改变 seed → 得到布局、星星连线、配色都可能不同的新星图预设中未指定的选项继续随 seed 变化这正是每个预设仍能产出大量不同头像的原因。因此把用户 ID 当作 seed就能让每个人拥有一张「私有」且稳定的星图头像适合作为默认头像 / 占位图使用。仓库中的实现与验证本文内容对应的仓库证据如下可进一步深入星座风格页面风格一句话定位与描述星座预设页面预设概念的官方说明星座预设配置7 个预设的完整选项数据核心选项文档全部选项的类型、默认值与取值范围的权威来源HTTP API 文档URL 约定、查询参数与文件格式JavaScript 核心库 READMEdicebear/core的安装与用法示例预设渲染脚本展示各风格定义按dicebear/styles/${styleName}.json加载的实现方式预设页面同步脚本说明预设页面由预设 JSON 统一生成。综上Constellation 是 DiceBear 生态中一款轻量、纯图案化的头像风格HTTP API 一条 URL 即可接入JavaScript 库提供离线确定性渲染7 个官方预设覆盖从深空、暖夜到霓虹、蓝图的多套配色再加上可选的闪烁动画适合作为用户默认头像、占位图或需要稳定图形的界面元素直接使用。赞分享UI组件后端【免费下载链接】dicebearDiceBear is an avatar library for designers and developers. 项目地址https://gitcode.com/gh_mirrors/di/dicebear点击查看免费下载相关推荐DiceBear Constellation 风格预设指南用现成选项组合快速定制星空头像DiceBear Constellation 风格预设指南用现成选项组合快速定制星空头像 DiceBear 为每个头像风格提供一组“预设Presets”UI组件后端DiceBear Cats 头像风格完全指南HTTP API、JavaScript 库与 CLI 的多端生成实践DiceBear Cats 头像风格完全指南HTTP API、JavaScript 库与 CLI 的多端生成实践 Cats 是 DiceBear 在 11.xUI组件后端DiceBear Blobs 头像风格实战指南同色系有机形状的生成、参数配置与官方预设DiceBear Blobs 头像风格实战指南同色系有机形状的生成、参数配置与官方预设 Blobs 是 DiceBear 提供的一个极简抽象头像风格用同一种UI组件后端上一篇Rocket Redis插件开发指南如何扩展Redis GUI的功能模块下一篇 如何用Inpaint-web免费实现AI图片修复与高清化浏览器端神器教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考