JavaScript 实现基于 SVG 的默认头像生成方案

作者：松果时间：2026-10-22 12:46:53浏览：326

本文介绍一种基于 JavaScript 和 SVG 技术生成用户默认头像的方法。该方案通过读取 img 标签的 alt 属性，动态生成包含姓名的 SVG 图片，支持中文姓名、自定义背景色及显示部分。相比 Canvas 方案，SVG 方式性能更优且应用成本低，同时提供 Vue.js 指令集成方式，方便现代前端框架使用。

JavaScript 默认头像生成方案概述

在多个前端项目中，常遇到用户未上传头像的情况。为了增强用户辨识度并保留个性化特征，系统通常会为没有头像的用户自动生成带有其姓名的默认头像。

相关代码已开源，地址为：https://github.com/joaner/namedavatar

JavaScript 默认头像生成方案概述

基础调用与配置

该方案的调用方式非常简便。

当图片上传失败或不存在时，可以直接在 <img> 标签上渲染默认头像。系统会自动从 img 标签的 alt 属性中获取用户名进行显示。


<img alt="李连杰" width="32" style="border-radius: 100%">
<img src="./invalid.jpg" alt="Tom Hanks" width="40">

<script>
requirejs('namedavatar', function(namedavatar){
 namedavatar.config({
  nameType: 'lastName',
 })

 namedavatar.setImgs(document.querySelectorAll('img[alt]'), 'alt')
})
</script>

若 <img src="./invalid.jpg"> 指向的资源无效，调用 namedavatar.setImgs() 方法后，插件会提取 alt 属性中的用户名，并将 src 替换为生成的数据 URI。


<img id="avatar1" src="data:image/svg+xml,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;32&quot; height=&quot;32&quot;&gt;&lt;rect fill=&quot;#9C27B0&quot; x=&quot;0&quot; y=&quot;0&quot; width=&quot;100%&quot; height=&quot;100%&quot;&gt;&lt;/rect&gt;&lt;text fill=&quot;#FFF&quot; x=&quot;50%&quot; y=&quot;50%&quot; text-anchor=&quot;middle&quot; alignment-baseline=&quot;central&quot; font-size=&quot;16&quot; font-family=&quot;Verdana, Geneva, sans-serif&quot;&gt;Hanks&lt;/text&gt;&lt;/svg&gt;">

方案优势分析

与其他类似项目相比，该方案具有以下优势：

首先，它对中文姓名的支持更加完善。
其次，它直接在 <img> 标签上填充 data URI 格式的 SVG 数据，无需额外处理，应用成本更低。
此外，该方案基于 <svg> 实现，而非使用 <canvas> 进行渲染，因此在性能表现上更为优异。
最后，它支持更多的配置选项，例如可以定义显示姓名的哪一部分，或者设置随机背景颜色。

Vue.js 集成方式

该方案还兼容 Vue.js，提供了 directive 指令的使用方式。


import { directive } from 'namedavatar/vue'
// register as directive
Vue.directive('avatar', directive);
// in vue template
<template>
<img v-avatar="'Tom Hanks'" width="36"/>
</template>

以上内容即为本次整理的全部信息，感谢各位读者的支持。

作者最新文章

Vue前端日历插件VCalendar集成与使用指南

2026-10-31 18:16:55

uniapp scroll-view 组件实战：Vue3 改造与滚动逻辑详解

2026-10-31 14:49:47

ElementUI el-calendar 周月视图切换与自定义实现

2026-10-31 14:48:43

Vue Element UI 结合 sortable.js 实现嵌套表格行内拖拽排序

2026-10-31 13:57:34

el-input 限制输入只允许输入浮点型的解决思路

2026-10-31 12:30:12