vue随机头像与昵称-蒲公英云

一、随机头像

1.组件

identicon.js（哈希头像生成器）
在这里插入图片描述

Github 给无头像用户生成 5x5 像素的 Identicons 头像。这一生成过程使用了用户ID的哈希值，然后根据哈希值每一位的奇偶值来决定对应位置上的像素的开关。这样生成的图像，配上由哈希值决定的颜色，保证可生成大量独一无二的图像。

当给定相同的哈希值时，它将产生相同的形状和颜色。支持PNG和SVG输出格式。

GitHub地址：https://github.com/stewartlord/identicon.js

2.使用

npm install identicon.js --save
"blueimp-md5": "^2.18.0",
"identicon.js": "^2.3.3",

通过提供哈希字符串和大小来生成Identicon。

import md5 from ‘blueimp-md5’
import Identicon from ‘identicon.js’

// create a base64 encoded PNG
let hash=md5(Math.random());
var data = new Identicon(‘d3b07384d113edec49eaa6238ad5ff00’, 420).toString();

// write to a data URI
document.write(‘‘);

自定义其他属性，通过提供十六进制字符串和options对象生成Identicon

// set up options
var hash = “c157a79031e1c40f85931829bc5fc552”; // 15+ hex chars
var options = {

  foreground: [0, 0, 0, 255],               // rgba black
  background: [255, 255, 255, 255],         // rgba white
  margin: 0.2,                              // 20% margin
  size: 420,                                // 420px square
  format: 'svg'                             // use SVG instead of PNG
};

// create a base64 encoded SVG
var data = new Identicon(hash, options).toString();

// write to a data URI
document.write(‘‘);

二、随机昵称

实现思路：

随机生成中文范围内的Unicode码
将Unicode码转换成中文
根据长度循环产生拼接

实现过程

1.随机生成中文范围内的Unicode码

定义一个获取指定范围随机数的方法（Unicode中文范围:4e00,9fa5）20902字
其中，array.js为unicode16进制码数组集合

import a from "./array.js";
// 获取指定范围内的随机数
function randomAccess() {
    return a[Math.floor(Math.random() * a.length)];
}

2.将Unicode码转换成中文

将获取到的Unicode转换成中文，在页面上的Unicode显示方式是\u4e00

unescape解码函数的工作原理：通过找到形式为 %xx 和 %uxxxx 的字符序列（x 表示十六进制的数字），用 Unicode 字符 \u00xx 和 \uxxxx 替换这样的字符序列进行解码。

// 解码  9524  \u9524  %u9524  锤
function decodeUnicode(str) {
    //Unicode显示方式是\u4e00
    str = "\\u" + str;
    str = str.replace(/\\/g, "%");
    //转换中文
    str = unescape(str);
    //将其他受影响的转换回原来
    str = str.replace(/%/g, "\\");
    return str;
}
replace替换规则了解一下：
.replace(/\//g, '')的作用是把所有的 / 替换为空，说明：
.replace(参数1,参数2)的作用是把 参数1 替换为 参数2，这里参数1为/\//g，参数2为空。意思就是把符合这个表达式的字符串替换为空。
下面说下这表达式：/\//g
格式为：/ pattern /[switch]
pattern就是要替换的字符串
[switch]有三个常用值：
g：代表全局匹配
i：代表忽略大小写
gi：代表全局匹配+忽略大小写
[switch]为空的话只匹配第一个符合表达式的值
所以 /\//g 就是指 所有的 \/，而 \/ 就比较好理解了，就是 / 前面加个转义符号

2.完整的转换

//获取16进制编码
let unicodeNum=randomAccess().toString(16);
//解码为中文
let name=decodeUnicode(unicodeNum);

示例

<template>
    <div style="background-color: #eeeeee">
        <img @click="getRandomheader" style="border-radius: 50%" :src="imgageUrl" width="100px;" height="100px;">
        <span style="position: relative;bottom: 45px;margin-left: 10px" v-text="nickname"></span>
        <button @click="getRandomheader">切换头像</button>
        <button @click="getRandomNickName">切换昵称</button>
    </div>
</template>
<script>
    import md5 from 'blueimp-md5'
    import Identicon from 'identicon.js'
    import {getRandomName} from '../utils/getRandomName.js'
    export default {
        data() {
            return {
                imgageUrl:'',
                nickname:''
            };
        },
        mounted() {
            this.getRandomheader()
            this.getRandomNickName()
        },
        methods: {
            getRandomheader() {
                let hash=md5(Math.random());
                let data=new Identicon(hash,420).toString();
                this.imgageUrl="data:image/png;base64,"+data
                // let options = {
                //     foreground: [0, 0, 0, 255],               // rgba black
                //     background: [255, 255, 255, 255],         // rgba white
                //     margin: 0.2,                              // 20% margin
                //     size: 100,                                // 420px square
                //     format: 'svg'                             // use SVG instead of PNG
                // };
                // let data = new Identicon(hash, options).toString();
                // this.imgageUrl="data:image/svg+xml;base64,"+data
            },
            getRandomNickName() {
                let name=getRandomName(Math.floor(Math.random() * 3+2))
                this.nickname=name
            },
        },
    };
</script>
<style scoped>
</style>