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>

在这里插入图片描述

  • 1
    点赞
  • 1
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值