mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-11-25 18:55:44 +03:00
Code Issues Projects Releases Packages Wiki Activity

Somebody stop me

Browse source
This commit is contained in:
Lim Chee Aun 2023-03-13 10:42:34 +08:00
parent cd6c14c1d9
commit aeb75fdea7
2 changed files with 66 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/account-info.css
View file

@ -56,6 +56,7 @@
text-shadow: -8px 0 12px -6px var(--bg-color), 8px 0 12px -6px var(--bg-color),
-8px 0 24px var(--header-color-3, --bg-color),
8px 0 24px var(--header-color-4, --bg-color);
animation: fade-in 0.5s both ease-in-out 0.1s;
}
.account-container header .avatar {
/* box-shadow: -8px 0 24px var(--header-color-3, --bg-color),
@ -64,6 +65,13 @@
drop-shadow(8px 0 24px var(--header-color-4, --bg-color));
}
.account-container main > *:first-child {
animation: fade-in 0.5s both ease-in-out 0.2s;
}
.account-container main > *:first-child ~ * {
animation: fade-in 0.5s both ease-in-out 0.3s;
}
.account-container .note {
font-size: 95%;
line-height: 1.4;

68
src/components/account-info.jsx
View file

@ -152,17 +152,59 @@ function AccountInfo({
canvas.width = e.target.width;
canvas.height = e.target.height;
ctx.drawImage(e.target, 0, 0);
// const colors = [
// ctx.getImageData(0, 0, 1, 1).data,
// ctx.getImageData(e.target.width - 1, 0, 1, 1).data,
// ctx.getImageData(0, e.target.height - 1, 1, 1).data,
// ctx.getImageData(
// e.target.width - 1,
// e.target.height - 1,
// 1,
// 1,
// ).data,
// ];
// Get 10x10 pixels from corners, get average color from each
const pixelDimension = 10;
const colors = [
ctx.getImageData(0, 0, 1, 1).data,
ctx.getImageData(e.target.width - 1, 0, 1, 1).data,
ctx.getImageData(0, e.target.height - 1, 1, 1).data,
ctx.getImageData(0, 0, pixelDimension, pixelDimension)
.data,
ctx.getImageData(
e.target.width - 1,
e.target.height - 1,
1,
1,
e.target.width - pixelDimension,
0,
pixelDimension,
pixelDimension,
).data,
];
ctx.getImageData(
0,
e.target.height - pixelDimension,
pixelDimension,
pixelDimension,
).data,
ctx.getImageData(
e.target.width - pixelDimension,
e.target.height - pixelDimension,
pixelDimension,
pixelDimension,
).data,
].map((data) => {
let r = 0;
let g = 0;
let b = 0;
let a = 0;
for (let i = 0; i < data.length; i += 4) {
r += data[i];
g += data[i + 1];
b += data[i + 2];
a += data[i + 3];
}
const dataLength = data.length / 4;
return [
r / dataLength,
g / dataLength,
b / dataLength,
a / dataLength,
];
});
const rgbColors = colors.map((color) => {
const [r, g, b, a] = lightenRGB(color);
return `rgba(${r}, ${g}, ${b}, ${a})`;
@ -488,9 +530,15 @@ function lightenRGB([r, g, b]) {
const luminence = 0.2126 * r + 0.7152 * g + 0.0722 * b;
console.log('luminence', luminence);
// Follow this range
// luminence = 0, alpha = 0.05
// luminence = 0, alpha = 0.01
// luminence = 220, alpha = 1
const alpha = Math.min(1, (luminence / 220) * 0.95 + 0.05);
let alpha;
if (luminence >= 220) {
alpha = 1;
} else {
alpha = (luminence / 255) * 0.99 + 0.01;
}
alpha = Math.min(1, alpha);
return [r, g, b, alpha];
}