javascript填充默认头像方法

在我的不少项目中，都有缺省头像的问题。为了保持个性和方便辨认，会给没有头像的用户填充带名字的头像。

代码分享：https://github.com/joaner/namedavatar

调用简单

如果上传头像不存在，直接会在 <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变成这样

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

相比其它类似项目

  1. 首先对中文姓名的支持更好
  2. 直接在<img>标签上填充data URI，绿色无添加，应用成本更低
  3. 基于<svg>，没有用<canvas>渲染，性能也会好一点
  4. 支持的配置项更多，比如可以定义显示哪部分，或是随机背景颜色

也支持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>

以上就是本次整理的全部内容，感谢大家对我们的支持。

赞 (0)

相关推荐

  • javascript填充默认头像方法

    在我的不少项目中,都有缺省头像的问题.为了保持个性和方便辨认,会给没有头像的用户填充带名字的头像. 代码分享:https://github.com/joaner/namedavatar 调用简单 如果上传头像不存在,直接会在 <img> 标签上填充默认头像,用户名从alt获取: <img alt="李连杰" width="32" style="border-radius: 100%"> <img src="

  • 徒手实现关于JavaScript的24+数组方法

    徒手实现关于JavaScript的24+数组方法

    目录 一.遍历类 1. forEach 2. map 3. every 4. some 5. filter 6. reduce 7. reduceRight 二.查找类 1. find 2. findIndex 3. indexOf 4. lastIndexOf 5. includes 三.增删改类 1. push 2. pop 3. unshift 4. shift 5. reverse 6. fill 7. concat 8. join 四.静态方法 1. Array.isArray 2.

  • 利用JavaScript构建树形图的方法详解

    利用JavaScript构建树形图的方法详解

    目录 什么是树形图 浏览JS树形图 创建一个基本的JS树形图 1. 创建一个HTML页面 2. 参考JavaScript文件 3.设置数据 4. 编写一些JS树形图代码 自定义JS树形图 A. 改变颜色 B. 应用线性色标 C. 格式化标签和工具提示 D. 按升序排列图块 树形图可视化广泛用于分层数据分析.如果你没有经验还想创建一个,那将会有些复杂.下面是一个详细教程,教你如何使用JavaScript创建交互式树形图. 宇宙中只有我们吗?我们每个人都曾在某个时候问过自己这个问题.当我们在考虑地球

  • JavaScript弹出窗口方法汇总

    本文实例汇总了常用的JavaScript弹出窗口方法,供大家对比参考,希望能对大家有所帮助.详细方法如下: 1.无提示刷新网页: 大家有没有发现,有些网页,刷新的时候,会弹出一个提示窗口,点"确定"才会刷新. 而有的页面不会提示,不弹出提示窗口,直接就刷新了. 如果页面没有form, 则不会弹出提示窗口 如果页面有form表单, a)<form  method="post" ...>     会弹出提示窗口 b)<form  method=&quo

  • .net与javascript脚本的交互方法总结

    本文实例总结了.net与javascript脚本的交互方法,分享给大家供大家参考.具体方法如下: 1.asp.net呼叫js 复制代码 代码如下: Response.Write("<script language=javascript>"); Response.Write("alert('登峰欢迎您 ');" ); Response.Write("location.href='login.aspx';") ; Response.Wri

  • JavaScript常用对象的方法和属性小结

    本文将简单介绍JavaScript中一些常用对象的属性和方法,以及几个有用的系统函数. 一.串方法 JavaScript有强大的串处理功能,有了这些串方法,才能编写出丰富多彩的网页.在这一部分里,我们将介绍到如何使用与串对象有关的方法和属性. 1.串对象的length属性 串对象仅有一个属性length,这个属性值表示这个串所包括字符的相对数目.语法为: stringName.length 2.串对象的方法 JavaScript提供了多个串方法以帮助控制显示信息.串方法可以分为几个大类,如属性方

  • JavaScript 数组- Array的方法总结(推荐)

    JavaScript中的Array类型是经常用到的,Array类型也提供了很多方法能实现我们需求,下面我们来总结一下 一.创建Array的方法 var colors=new Array(); var colors=new Array(3);//创建一个长度为3的数组 var colors=new Array("red","blue")//创建一个数组["red","blue"] 当然,上面的new可以省略不写,如 var co

  • 在HTML文档中嵌入JavaScript的四种方法

    在HTML里嵌入JavaScript 在HTML文档里嵌入客户端JavaScript代码有4中方法: 1.内嵌,放置在<script>和</script>标签之间  (少): 2.放置在有<script>标签的src属性指定的外部文件中  (多): 3.放置自HTML事件处理程序中,该事件处理程序由onclick或onmouseover这样的HTML属性值指定它  (很少): 4.放在一个URL里,这个URL使用特殊的协议"javascript"协议

  • layui从数据库中获取复选框的值并默认选中方法

    如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="../../../static/js/css/layui.css" rel=

  • vue.js路由mode配置之去掉url上默认的#方法

    比如 : http://localhost:8080/#/login 路由中间默认带有 # 如果需要去掉#,只需将mode的默认值'hash'改为'history'即可. router.js : import Router from 'vue-router' import routers from './routers' export default () => { return new Router({ routers, mode: 'history' // 加上这个配置项,url默认的 #

随机推荐