【web前端技术】dicebear一句话生成头像

简介: 【web前端技术】dicebear一句话生成头像



前言

dicebear是一个专为程序开发者和设计者提供生成头像的Javascript库。你可以选择使用HTTP-API来快速的调用官方的服务生成头像,也可以引入npm包来调用代码生成头像。


一、dicebear体验

官方提供了一个在线测试的小例子,网址是

https://avatars.dicebear.com/

打开后如下图所示,左边是关于该库的一些文档资料,右边是生成头像的demo

二、使用步骤

1.使用Http-API直接调用

官方提供的接口如下

https://avatars.dicebear.com/api/:sprites/:seed.svg

在你的请求中,需要将:sprites替换为male, female, human, identicon, initials, bottts, avataaars, jdenticon, gridy 或者 micah:seed替换成任意的字符,但是不要是你个人的敏感信息。

此外,还支持指定一些特定的选项。比如,要指定一个蓝色的背景

https://avatars.dicebear.com/api/male/john.svg?background=%230000ff

或者要指定头像中人物的表情

https://avatars.dicebear.com/api/male/john.svg?mood[]=happy&mood[]=sad

你也可以指定API的版本

https://avatars.dicebear.com/4.6/api/:sprites/:seed.svg

当前支持的版本有4.4, 4.5, 4.6, 4.7, 4.84.9.

2.使用npm将dicebear安装到你的项目

安装下面的两个包

npm install --save @dicebear/avatars
npm install --save @dicebear/avatars-male-sprites

然后使用下面的代码来生成头像

import { createAvatar } from '@dicebear/avatars';
import * as style from '@dicebear/avatars-identicon-sprites';
let svg = createAvatar(style, {
  seed: 'custom-seed',
  // ... and other options
});

相关内容

以上就是本文的所有主要内容。通过本文,你可以了解到怎么调用dicebear来生成头像。此外,还有一些别的东西,如果你有兴趣,可以详细了解了解,最好阅读源码,以提升自己的编程水平。

1. 官方开源HTTP-API项目

在前面有一部分是直接调用官方的HTTP-API,但是官方也提供了这个项目的源码,GitHub开源地址

https://github.com/dicebear/api/

你可以在这定制你自己的HTTP-API

2. 命令行模式

命令行模式实际上感觉并不是很方便,所以官方描述很少,但你如果感兴趣可以看一下,地址https://avatars.dicebear.com/integrations/cli

3. Serverless部署

这个是基于Cloudflare的Serverless框架的部署。一个免费的账户拥有10w次请求可以使用,是一个不错的选择。如果你对他感兴趣,可以去以下网站https://avatars.dicebear.com/integrations/serverless#installation

如果后面有机会,本人会发布相关的文章。

4. 生成头像的风格

官方在文档中给出了生成头像的风格,如果你要生成头像的话,请到以下网站来选择你所需要的风格

https://avatars.dicebear.com/styles

5. 头像生成选项

生成头像有几个可选项,可以指定生成头像的类型,详细请看https://avatars.dicebear.com/docs/options

目录
相关文章
|
3月前
|
前端开发 JavaScript 测试技术
前端测试技术中,如何提高集成测试的效率?
前端测试技术中,如何提高集成测试的效率?
|
9天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
27 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
3月前
|
前端开发 JavaScript
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中,Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念,正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用,同时通过一个简单的代码示例,揭示如何将一个庞大的前端工程拆分成小而美的模块,进而提升项目的可维护性、可扩展性和开发效率。
|
3月前
|
人工智能 安全 物联网
区块链技术的未来展望:去中心化金融(DeFi)与Web 3.0的融合
区块链技术的未来展望:去中心化金融(DeFi)与Web 3.0的融合
|
3月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
69 6
|
3月前
|
前端开发 JavaScript 搜索推荐
前端懒加载:提升页面性能的关键技术
前端懒加载是一种优化网页加载速度的技术,通过延迟加载非首屏内容,减少初始加载时间,提高用户访问体验和页面性能。
|
3月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
90 5
|
3月前
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
84 3
|
3月前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
3月前
|
移动开发 前端开发 JavaScript
惊!这些前端技术竟然能让你的网站在移动端大放异彩!
随着互联网技术的发展,移动设备成为主要的上网工具。本文介绍了几种关键的前端技术,包括响应式设计、图片优化、字体选择、HTML5和CSS3的应用、性能优化及手势操作设计,帮助开发者提升网站在移动端的显示效果和用户体验。示例代码展示了如何实现简单的双向绑定功能。
62 3

热门文章

最新文章

  • 1
    开箱即用的GO后台管理系统 Kratos Admin - 前端权限
    3
  • 2
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    32
  • 3
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    61
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    27
  • 5
    巧用通义灵码,提升前端研发效率
    93
  • 6
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    144
  • 7
    详解智能编码在前端研发的创新应用
    100
  • 8
    智能编码在前端研发的创新应用
    83
  • 9
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    38
  • 10
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    124