javascript填充默認(rèn)頭像方法

更新時(shí)間：2018年02月22日 11:08:31 作者：joaner

本篇文章通過代碼實(shí)例給大家講述了如何javascript填充默認(rèn)頭像以及相代碼分享，對(duì)此有興趣的朋友可以學(xué)習(xí)下。

在我的不少項(xiàng)目中，都有缺省頭像的問題。為了保持個(gè)性和方便辨認(rèn)，會(huì)給沒有頭像的用戶填充帶名字的頭像。

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

調(diào)用簡單

如果上傳頭像不存在，直接會(huì)在 <img> 標(biāo)簽上填充默認(rèn)頭像，用戶名從alt獲?。?/p>

<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()就會(huì)填充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;">

相比其它類似項(xiàng)目

首先對(duì)中文姓名的支持更好
直接在<img>標(biāo)簽上填充data URI，綠色無添加，應(yīng)用成本更低
基于<svg>，沒有用<canvas>渲染，性能也會(huì)好一點(diǎn)
支持的配置項(xiàng)更多，比如可以定義顯示哪部分，或是隨機(jī)背景顏色

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

以上就是本次整理的全部內(nèi)容，感謝大家對(duì)腳本之家的支持。

您可能感興趣的文章:

相關(guān)文章

C#中TrimStart,TrimEnd,Trim在javascript上的實(shí)現(xiàn)
今天在后臺(tái)寫了個(gè)類,后來才發(fā)現(xiàn),需要在JS上做..于是把代碼拷到j(luò)s上進(jìn)行修改,代碼中用到TrimStart,TrimEnd,Trim等方法,在網(wǎng)上找半天竟然沒找到.要么就只能清除空格的!
2011-01-01
javascript制作的簡單注冊(cè)模塊表單驗(yàn)證
通常在我們的HTML頁面表單中有大量的數(shù)據(jù)驗(yàn)證工作，免不了要寫很多驗(yàn)證表單的js代碼，這是一項(xiàng)非常繁瑣枯燥的工作。很多程序員也會(huì)經(jīng)常遺漏這項(xiàng)工作。所以寫了這一段JavaScript代碼提供給大家使用。使用起來很簡單，大家拿回去自由擴(kuò)展吧
2015-04-04
在Koa.js中實(shí)現(xiàn)文件上傳的接口功能
這篇文章主要介紹了在Koa.js中實(shí)現(xiàn)文件上傳的接口功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-10-10
JavaScript中的for...of和for...in循環(huán)容易遇到的問題及解決方法總結(jié)
在 JavaScript 編程中,for...of 和 for...in 是常用的循環(huán)語法,但它們?cè)谑褂脮r(shí)可能會(huì)引發(fā)一些意想不到的問題,本文將分享我在使用這兩種循環(huán)時(shí)所遇到的坑和經(jīng)驗(yàn),需要的朋友可以參考下
2023-08-08
Javascript數(shù)組中push方法用法分析
這篇文章主要介紹了Javascript數(shù)組中push方法用法,結(jié)合實(shí)例形式分析了javascript中push方法的原理、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下
2016-10-10
利用 JavaScript 實(shí)現(xiàn)并發(fā)控制的示例代碼
這篇文章主要介紹了利用 JavaScript 實(shí)現(xiàn)并發(fā)控制的示例代碼,本文通過實(shí)例代碼給大家介紹的非常想詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-12-12
微信小程序中使用Async-await方法異步請(qǐng)求變?yōu)橥秸?qǐng)求方法
這篇文章主要介紹了微信小程序中使用Async-await方法異步請(qǐng)求變?yōu)橥秸?qǐng)求方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-03-03
利用JS屏蔽頁面中的Enter按鍵提交表單的方法
下面小編就為大家?guī)硪黄肑S屏蔽頁面中的Enter按鍵提交表單的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-11-11
JS閉包的幾種常見形式實(shí)例詳解
本文通過實(shí)例代碼給大家詳細(xì)介紹了js閉包的幾種常見形式，代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下
2017-09-09
理解?JavaScript?對(duì)象屬性訪問的復(fù)雜性(示例代碼)
在?JavaScript?編程中,開發(fā)者經(jīng)常需要對(duì)對(duì)象的屬性進(jìn)行訪問,然而,訪問方式的不同可能導(dǎo)致代碼行為的差異,尤其在動(dòng)態(tài)屬性的處理中,本文介紹JavaScript對(duì)象屬性訪問的復(fù)雜性,感興趣的朋友跟隨小編一起看看吧
2024-12-12