【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

目录
相关文章
|
4天前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
13 2
|
1天前
|
前端开发 JavaScript API
惊呆了!这些前端技术竟然能让你的网站实现无缝滚动效果!
【10月更文挑战第30天】本文介绍了几种实现网页无缝滚动的技术,包括CSS3的`scroll-snap`属性、JavaScript的Intersection Observer API以及现代前端框架如React和Vue的动画库。通过示例代码展示了如何使用这些技术,帮助开发者轻松实现流畅的滚动效果,提升用户体验。
50 29
|
1天前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
1天前
|
JSON 前端开发 搜索推荐
惊!这些前端技术竟然能让你的网站实现个性化推荐功能!
【10月更文挑战第30天】随着互联网技术的发展,个性化推荐已成为提升用户体验的重要手段。前端技术如JavaScript通过捕获用户行为数据、实时更新推荐结果等方式,在实现个性化推荐中扮演关键角色。本文将深入解析这些技术,并通过示例代码展示其实际应用。
11 4
|
1天前
|
自然语言处理 前端开发 搜索推荐
前端界的黑科技:掌握这些技术,让你的网站秒变智能助手!
【10月更文挑战第30天】随着前端技术的发展,网站正逐渐变成智能助手。本文探讨了四大关键技术:自然语言处理(NLP)使网站理解用户输入;机器学习实现个性化推荐;Web Notifications API发送重要提醒;Web Speech API实现语音交互。通过这些技术,网站不仅能更好地理解用户,还能提供更智能、个性化的服务,提升用户体验。
9 3
|
1天前
|
前端开发 JavaScript 测试技术
前端小白逆袭之路:如何快速掌握前端测试技术,确保代码质量无忧!
【10月更文挑战第30天】前端开发技术迭代迅速,新手如何快速掌握前端测试以确保代码质量?本文将介绍前端测试的基础知识,包括单元测试、集成测试和端到端测试,以及常用的测试工具如Jest、Mocha、Cypress等。通过实践和学习,你也能成为前端测试高手。
12 3
|
1天前
|
前端开发 JavaScript 开发者
惊!这些前端技术竟然能让你的网站在社交媒体上疯传!
【10月更文挑战第30天】在这个信息爆炸的时代,社交媒体成为内容传播的重要渠道。本文介绍了前端开发者如何利用技术让网站内容在社交媒体上疯传,包括优化分享链接、创建引人注目的标题和描述、利用Open Graph和Twitter Cards、实现一键分享功能以及创造交互式内容。通过这些方法,提升用户分享意愿,使网站成为社交媒体上的热门话题。
8 2
|
2天前
|
SQL 负载均衡 安全
安全至上:Web应用防火墙技术深度剖析与实战
【10月更文挑战第29天】在数字化时代,Web应用防火墙(WAF)成为保护Web应用免受攻击的关键技术。本文深入解析WAF的工作原理和核心组件,如Envoy和Coraza,并提供实战指南,涵盖动态加载规则、集成威胁情报、高可用性配置等内容,帮助开发者和安全专家构建更安全的Web环境。
9 1
|
4天前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
14 3
|
5天前
|
前端开发 JavaScript
Bootstrap Web 前端 UI 框架
Bootstrap 是快速开发 Web 应用程序的前端工具包。
18 3