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,<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>">
相比其它類似項(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ì)腳本之家的支持。
您可能感興趣的文章:
- js實(shí)現(xiàn)文字頭像的生成代碼
- javascript頭像上傳代碼實(shí)例
- vue.js+elementUI實(shí)現(xiàn)點(diǎn)擊左右箭頭切換頭像功能（類似輪播圖效果）
- Django+JS 實(shí)現(xiàn)點(diǎn)擊頭像即可更改頭像的方法示例
- JS實(shí)現(xiàn)延遲隱藏功能的方法(類似QQ頭像鼠標(biāo)放上展示信息)
- 使用cropper.js裁剪頭像的實(shí)例代碼
- jQuery用戶頭像裁剪插件cropbox.js使用詳解
- web前端開發(fā)upload上傳頭像js示例代碼
- JavaScript頭像上傳插件源碼分享
- js實(shí)現(xiàn)頭像上傳并且可預(yù)覽提交
相關(guān)文章
在前端快速發(fā)展地過程中,為了契合更好的設(shè)計(jì)模式,產(chǎn)生了 fetch 框架,下面這篇文章主要給大家介紹了關(guān)于JavaScript中fetch()用法的相關(guān)資料,需要的朋友可以參考下2022-06-06
很多人會(huì)把微信小程序的登錄和授權(quán)搞混淆,下面這篇文章主要給大家介紹了如何通過大白話理解微信小程序授權(quán)登錄的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
用了bootstrap模版搭建的網(wǎng)站，在IE7中打不開，在IE8中背景圖片都不顯示，內(nèi)容排列也出現(xiàn)問題，在IE9中表現(xiàn)的最好，在IE11中出現(xiàn)彈出層中的圖片無法顯示，那么這些兼容性怎么去解決2015-10-10
BootStrap數(shù)據(jù)表格實(shí)例代碼
本文通過實(shí)例代碼給大家分享了BootStrap數(shù)據(jù)表格的相關(guān)知識(shí)，感興趣的朋友一起看看吧2017-09-09
H5實(shí)現(xiàn)中獎(jiǎng)記錄逐行滾動(dòng)切換效果
這篇文章主要為大家詳細(xì)介紹了H5實(shí)現(xiàn)中獎(jiǎng)記錄逐行滾動(dòng)切換效果，利用定時(shí)器實(shí)現(xiàn)中獎(jiǎng)記錄逐行展示，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章介紹了JS定時(shí)刷新頁面及跳轉(zhuǎn)頁面的方法，有需要的朋友可以參考一下2013-07-07
前端實(shí)現(xiàn)瀏覽器自定義滾動(dòng)條寫法實(shí)例
自定義滾動(dòng)條最早是IE玩出來的,但是后來,不知道為什么IE把這個(gè)有意思的功能廢棄了,下面這篇文章主要給大家介紹了關(guān)于前端實(shí)現(xiàn)瀏覽器自定義滾動(dòng)條寫法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-06-06
最近在編寫一個(gè)JavaScript框架，發(fā)現(xiàn)有很多細(xì)節(jié)注意得不夠,于是開始關(guān)注JavaScript提高效率的一些技巧，在這里分享給大家，感興趣的你可以參考下2013-08-08
這篇文章主要介紹了微信小程序日歷彈窗選擇器，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了js類的繼承定義與用法,結(jié)合實(shí)例形式分析了javascript關(guān)于類的定義與繼承的相關(guān)使用技巧,需要的朋友可以參考下2019-06-06