IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 【web前端技术】dicebear一句话生成头像 -> 正文阅读

[JavaScript知识库]【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
在这里插入图片描述

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-06-29 18:55:53  更:2022-06-29 18:59:17 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 12:58:54-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码