技術標籤：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('<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>