vue随机头像与昵称

拼搏现实的明天。 2023-01-08 02:19 500阅读 0赞

#### 一、随机头像 ####

##### 1.组件 #####

identicon.js（哈希头像生成器）  
![在这里插入图片描述][20210119092345723.png]  
![在这里插入图片描述][20210119092520526.png]

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('<img width=420 height=420 src="data:image/png;base64,' + data + '">');

*  自定义其他属性，通过提供十六进制字符串和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('<img width=420 height=420 src="data:image/svg+xml;base64,' + data + '">');

#### 二、随机昵称 ####

##### 实现思路： #####

*  随机生成中文范围内的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>

![在这里插入图片描述][20210118171217415.png]

[20210119092345723.png]: /images/20221119/1826d1c780d84bddb0303f3f67068ff4.png
[20210119092520526.png]: https://img-blog.csdnimg.cn/20210119092520526.png
[20210118171217415.png]: https://img-blog.csdnimg.cn/20210118171217415.png