JS implements default avatar filling-JS Tutorial-php.cn

JS implements default avatar filling

php中世界最好的语言

Release： 2018-03-17 15:22:44

Original

2226 people have browsed it

This time I will bring you JS to implement default avatar filling. What are the precautions for JS to implement default avatar filling? The following is a practical case, let's take a look.

In many of my projects, there are problems with default avatars. In order to maintain individuality and facilitate identification, avatars with names will be filled in for users who do not have avatars.

Code sharing:

https://github.com/joaner/namedavatar

Simple call

If the uploaded avatar does not exist, the default avatar will be filled directly on the tag, and the username is obtained from 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>

Copy after login

The resource is invalid, namedavatar.setImgs() will fill in the user name in alt, and src will become like this

<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>">

Copy after login

Compared with other similar projects

First of all, it has better support for Chinese names
Fill the data URI directly on the tag, green without adding, lower application cost
Based on
Supports more configuration items, for example, you can define which part to display, Or a random background color

Also supports Vue.js's directive command method

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

Copy after login

I believe you have mastered the method after reading the case in this article, please pay attention to php for more excitement Other related articles on the Chinese website!