完成头像组件;badge组件增加颜色支持
parent
175af76322
commit
cd1cdef0c1
|
@ -1,78 +0,0 @@
|
||||||
/**
|
|
||||||
*
|
|
||||||
* @authors yutent (yutent@doui.cc)
|
|
||||||
* @date 2017-03-17 20:55:57
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
'use strict'
|
|
||||||
|
|
||||||
function arraySum(arr) {
|
|
||||||
var sum = 0
|
|
||||||
arr.forEach(function(it) {
|
|
||||||
sum += +it
|
|
||||||
})
|
|
||||||
return sum
|
|
||||||
}
|
|
||||||
|
|
||||||
// 1216fc0c668c09ade029ceae6db87f97cf560e21
|
|
||||||
export const create = (hash, size) => {
|
|
||||||
if (!hash) return this.defafultImg
|
|
||||||
|
|
||||||
if (!size || size < 100) {
|
|
||||||
size = 100
|
|
||||||
}
|
|
||||||
|
|
||||||
var cv = document.createElement('canvas'),
|
|
||||||
ct = cv.getContext('2d'),
|
|
||||||
bg = hash.slice(-3),
|
|
||||||
color = hash.slice(-9, -6),
|
|
||||||
fixColor = color,
|
|
||||||
lens = hash.slice(0, 8).match(/([\w]{1})/g),
|
|
||||||
pos1 = hash.slice(8, 16).match(/([\w]{1})/g),
|
|
||||||
pos2 = hash.slice(16, 24).match(/([\w]{1})/g),
|
|
||||||
step = size / 10
|
|
||||||
|
|
||||||
cv.width = size
|
|
||||||
cv.height = size
|
|
||||||
|
|
||||||
lens = lens.map(c => {
|
|
||||||
c = parseInt(c, 16)
|
|
||||||
return c % 8
|
|
||||||
})
|
|
||||||
pos1 = pos1.map(c => {
|
|
||||||
c = parseInt(c, 16)
|
|
||||||
return c % 4
|
|
||||||
})
|
|
||||||
pos2 = pos2.map(c => {
|
|
||||||
c = parseInt(c, 16)
|
|
||||||
return c % 4
|
|
||||||
})
|
|
||||||
fixColor = arraySum(lens) > 32 ? bg : color
|
|
||||||
|
|
||||||
ct.fillStyle = '#' + bg
|
|
||||||
ct.fillRect(0, 0, size, size)
|
|
||||||
|
|
||||||
for (var i = 1; i < 9; i++) {
|
|
||||||
var xl = lens[i - 1],
|
|
||||||
xp1 = pos1[i - 1],
|
|
||||||
xp2 = pos2[i - 1]
|
|
||||||
|
|
||||||
if (xl + xp1 > 8) {
|
|
||||||
xl = 8 - xp1
|
|
||||||
}
|
|
||||||
ct.fillStyle = '#' + color
|
|
||||||
ct.fillRect((xp1 + 1) * step, i * step, xl * step, step)
|
|
||||||
|
|
||||||
ct.fillStyle = '#' + color
|
|
||||||
ct.fillRect((9 - xp1 - xl) * step, i * step, xl * step, step)
|
|
||||||
|
|
||||||
ct.fillStyle = '#' + fixColor
|
|
||||||
ct.fillRect((xp2 + 1) * step, i * step, step, step)
|
|
||||||
|
|
||||||
ct.fillStyle = '#' + fixColor
|
|
||||||
ct.fillRect((8 - xp2) * step, i * step, step, step)
|
|
||||||
}
|
|
||||||
|
|
||||||
return cv.toDataURL()
|
|
||||||
}
|
|
|
@ -14,8 +14,7 @@
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
font-size: var(--size, 32px);
|
font-size: var(--size, 32px);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background: nth($cp, 2);
|
color: #fff;
|
||||||
color: nth($cd, 1);
|
|
||||||
user-select: none;
|
user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
|
|
||||||
|
@ -40,6 +39,28 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:host([color='red']) {
|
||||||
|
background: #ff5061;
|
||||||
|
}
|
||||||
|
:host([color='teal']) {
|
||||||
|
background: #3fc2a7;
|
||||||
|
}
|
||||||
|
:host([color='purple']) {
|
||||||
|
background: #ac61ce;
|
||||||
|
}
|
||||||
|
:host([color='green']) {
|
||||||
|
background: #58d68d;
|
||||||
|
}
|
||||||
|
:host([color='orange']) {
|
||||||
|
background: #ffb618;
|
||||||
|
}
|
||||||
|
:host([color='dark']) {
|
||||||
|
background: #62778d;
|
||||||
|
}
|
||||||
|
:host([color='blue']) {
|
||||||
|
background: #66b1ff;
|
||||||
|
}
|
||||||
|
|
||||||
:host([size='large']) {
|
:host([size='large']) {
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
|
@ -64,6 +85,82 @@
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
const COLORS = [
|
||||||
|
'#3fc2a7', //teal
|
||||||
|
'#58d68d', //green
|
||||||
|
'#ac61ce', // purple
|
||||||
|
'#66b1ff', //blue
|
||||||
|
'#ff5061', //red
|
||||||
|
'#ffb618', // orange
|
||||||
|
'#62778d' //dark
|
||||||
|
]
|
||||||
|
const COLOR_NAME = ['teal', 'green', 'purple', 'blue', 'red', 'orange', 'dark']
|
||||||
|
var canvas = document.createElement('canvas')
|
||||||
|
var ctx = canvas.getContext('2d')
|
||||||
|
var size = 500
|
||||||
|
canvas.width = size
|
||||||
|
canvas.height = size
|
||||||
|
|
||||||
|
function sum(arr) {
|
||||||
|
var n = 0
|
||||||
|
arr.forEach(a => (n += a))
|
||||||
|
return n
|
||||||
|
}
|
||||||
|
|
||||||
|
function createImage(hash) {
|
||||||
|
if (!hash) {
|
||||||
|
return './def.jpg'
|
||||||
|
}
|
||||||
|
|
||||||
|
var bg = COLORS[parseInt(hash.slice(-1), 16) % 7]
|
||||||
|
var color = '#fff'
|
||||||
|
var fixColor = color
|
||||||
|
var lens = hash.slice(0, 8).split('')
|
||||||
|
var pos1 = hash.slice(8, 16).split('')
|
||||||
|
var pos2 = hash.slice(16, 24).split('')
|
||||||
|
var step = size / 10
|
||||||
|
|
||||||
|
lens = lens.map(c => {
|
||||||
|
c = parseInt(c, 16)
|
||||||
|
return c % 8
|
||||||
|
})
|
||||||
|
pos1 = pos1.map(c => {
|
||||||
|
c = parseInt(c, 16)
|
||||||
|
return c % 4
|
||||||
|
})
|
||||||
|
pos2 = pos2.map(c => {
|
||||||
|
c = parseInt(c, 16)
|
||||||
|
return c % 4
|
||||||
|
})
|
||||||
|
|
||||||
|
fixColor = sum(lens) > 32 ? bg : color
|
||||||
|
|
||||||
|
ctx.fillStyle = bg
|
||||||
|
ctx.fillRect(0, 0, size, size)
|
||||||
|
|
||||||
|
for (var i = 1; i < 9; i++) {
|
||||||
|
var xl = lens[i - 1]
|
||||||
|
var xp1 = pos1[i - 1]
|
||||||
|
var xp2 = pos2[i - 1]
|
||||||
|
|
||||||
|
if (xl + xp1 > 8) {
|
||||||
|
xl = 8 - xp1
|
||||||
|
}
|
||||||
|
ctx.fillStyle = color
|
||||||
|
ctx.fillRect((xp1 + 1) * step, i * step, xl * step, step)
|
||||||
|
|
||||||
|
ctx.fillStyle = color
|
||||||
|
ctx.fillRect((9 - xp1 - xl) * step, i * step, xl * step, step)
|
||||||
|
|
||||||
|
ctx.fillStyle = fixColor
|
||||||
|
ctx.fillRect((xp2 + 1) * step, i * step, step, step)
|
||||||
|
|
||||||
|
ctx.fillStyle = fixColor
|
||||||
|
ctx.fillRect((8 - xp2) * step, i * step, step, step)
|
||||||
|
}
|
||||||
|
|
||||||
|
return canvas.toDataURL('image/webp')
|
||||||
|
}
|
||||||
export default class Avatar {
|
export default class Avatar {
|
||||||
props = {
|
props = {
|
||||||
hash: '', //哈希头像
|
hash: '', //哈希头像
|
||||||
|
@ -74,13 +171,9 @@ export default class Avatar {
|
||||||
constructor() {
|
constructor() {
|
||||||
/* render */
|
/* render */
|
||||||
this.__IMG__ = this.root.lastElementChild
|
this.__IMG__ = this.root.lastElementChild
|
||||||
}
|
var text = this.textContent.slice(0, 1)
|
||||||
|
this.setAttribute('color', COLOR_NAME[text.charCodeAt(0) % 7])
|
||||||
drawHash() {
|
this.textContent = text
|
||||||
var { hash } = this.props
|
|
||||||
|
|
||||||
if (hash) {
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(name, old, val) {
|
watch(name, old, val) {
|
||||||
|
@ -94,10 +187,7 @@ export default class Avatar {
|
||||||
break
|
break
|
||||||
case 'hash':
|
case 'hash':
|
||||||
this.removeAttribute('src')
|
this.removeAttribute('src')
|
||||||
this.props.hash = val
|
this.__IMG__.src = createImage(val)
|
||||||
|
|
||||||
this.drawHash()
|
|
||||||
|
|
||||||
break
|
break
|
||||||
|
|
||||||
case 'fit':
|
case 'fit':
|
||||||
|
|
|
@ -33,6 +33,24 @@
|
||||||
padding: 2px 4px;
|
padding: 2px 4px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:host([color='dark']) .dot {
|
||||||
|
background: nth($cd, 1);
|
||||||
|
}
|
||||||
|
:host([color='green']) .dot {
|
||||||
|
background: nth($cg, 1);
|
||||||
|
}
|
||||||
|
:host([color='blue']) .dot {
|
||||||
|
background: nth($cb, 1);
|
||||||
|
}
|
||||||
|
:host([color='orange']) .dot {
|
||||||
|
background: nth($co, 1);
|
||||||
|
}
|
||||||
|
:host([color='purple']) .dot {
|
||||||
|
background: nth($cpp, 1);
|
||||||
|
}
|
||||||
|
:host([color='teal']) .dot {
|
||||||
|
background: nth($ct, 1);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
Reference in New Issue