赞
踩
identicon.js(哈希头像生成器)
Github 给无头像用户生成 5x5 像素的 Identicons 头像。这一生成过程使用了用户ID的哈希值,然后根据哈希值每一位的奇偶值来决定对应位置上的像素的开关。这样生成 的图像,配上由哈希值决定的颜色,保证可生成大量独一无二的图像。
当给定相同的哈希值时,它将产生相同的形状和颜色。支持PNG和SVG输出格式。
GitHub地址:https://github.com/stewartlord/identicon.js
npm install identicon.js --save
"blueimp-md5": "^2.18.0",
"identicon.js": "^2.3.3",
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="https://img-blog.csdnimg.cn/2022010611223663237.png' + data + '">');
// 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中文范围:4e00,9fa5)20902字
其中,array.js为unicode16进制码数组集合
import a from "./array.js";
// 获取指定范围内的随机数
function randomAccess() {
return a[Math.floor(Math.random() * a.length)];
}
将获取到的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 就是指 所有的 \/,而 \/ 就比较好理解了,就是 / 前面加个转义符号
//获取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="https://img-blog.csdnimg.cn/2022010611223663237.png"+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>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。