脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js填充默认头像

javascript填充默认头像方法

 更新时间：2018年02月22日 11:08:31   作者：joaner  
本篇文章通过代码实例给大家讲述了如何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,&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;">

相比其它类似项目

  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>

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

您可能感兴趣的文章:

相关文章

  • C#中TrimStart,TrimEnd,Trim在javascript上的实现

    C#中TrimStart,TrimEnd,Trim在javascript上的实现

    今天在后台写了个类,后来才发现,需要在JS上做..于是把代码拷到js上进行修改,代码中用到TrimStart,TrimEnd,Trim等方法,在网上找半天竟然没找到.要么就只能清除空格的!
    2011-01-01
  • javascript制作的简单注册模块表单验证

    javascript制作的简单注册模块表单验证

    通常在我们的HTML页面表单中有大量的数据验证工作， 免不了要写很多验证表单的js代码，这是一项非常繁琐枯燥的工作。很多程序员也会经常遗漏这项工作。所以写了这一 段JavaScript代码提供给大家使用。使用起来很简单，大家拿回去自由扩展吧
    2015-04-04
  • 在Koa.js中实现文件上传的接口功能

    在Koa.js中实现文件上传的接口功能

    这篇文章主要介绍了在Koa.js中实现文件上传的接口功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-10-10
  • JavaScript中的for...of和for...in循环容易遇到的问题及解决方法总结

    JavaScript中的for...of和for...in循环容易遇到的问题及解决方法总结

    在 JavaScript 编程中,for...of 和 for...in 是常用的循环语法,但它们在使用时可能会引发一些意想不到的问题,本文将分享我在使用这两种循环时所遇到的坑和经验,需要的朋友可以参考下
    2023-08-08
  • Javascript数组中push方法用法分析

    Javascript数组中push方法用法分析

    这篇文章主要介绍了Javascript数组中push方法用法,结合实例形式分析了javascript中push方法的原理、使用方法与相关注意事项,需要的朋友可以参考下
    2016-10-10
  • 利用 JavaScript 实现并发控制的示例代码

    利用 JavaScript 实现并发控制的示例代码

    这篇文章主要介绍了利用 JavaScript 实现并发控制的示例代码,本文通过实例代码给大家介绍的非常想详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-12-12
  • 微信小程序中使用Async-await方法异步请求变为同步请求方法

    微信小程序中使用Async-await方法异步请求变为同步请求方法

    这篇文章主要介绍了微信小程序中使用Async-await方法异步请求变为同步请求方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-03-03
  • 利用JS屏蔽页面中的Enter按键提交表单的方法

    利用JS屏蔽页面中的Enter按键提交表单的方法

    下面小编就为大家带来一篇利用JS屏蔽页面中的Enter按键提交表单的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • JS闭包的几种常见形式实例详解

    JS闭包的几种常见形式实例详解

    本文通过实例代码给大家详细介绍了js闭包的几种常见形式，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下
    2017-09-09
  • 理解 JavaScript 对象属性访问的复杂性(示例代码)

    理解 JavaScript 对象属性访问的复杂性(示例代码)

    在 JavaScript 编程中,开发者经常需要对对象的属性进行访问,然而,访问方式的不同可能导致代码行为的差异,尤其在动态属性的处理中,本文介绍JavaScript对象属性访问的复杂性,感兴趣的朋友跟随小编一起看看吧
    2024-12-12

最新评论