this repo has no description
Try use OffscreenCanvas for avatars
+10
-10
+10
-10
src/components/avatar.jsx
+10
-10
src/components/avatar.jsx
···
13
13
14
14
const alphaCache = {};
15
15
16
+
const canvas = window.OffscreenCanvas
17
+
? new OffscreenCanvas(1, 1)
18
+
: document.createElement('canvas');
19
+
const ctx = canvas.getContext('2d');
20
+
16
21
function Avatar({ url, size, alt = '', squircle, ...props }) {
17
22
size = SIZES[size] || size || SIZES.m;
18
23
const avatarRef = useRef();
···
54
59
if (isMissing) return;
55
60
try {
56
61
// Check if image has alpha channel
57
-
const canvas = document.createElement('canvas');
58
-
const ctx = canvas.getContext('2d');
59
-
canvas.width = e.target.width;
60
-
canvas.height = e.target.height;
62
+
const { width, height } = e.target;
63
+
if (canvas.width !== width) canvas.width = width;
64
+
if (canvas.height !== height) canvas.height = height;
61
65
ctx.drawImage(e.target, 0, 0);
62
-
const allPixels = ctx.getImageData(
63
-
0,
64
-
0,
65
-
canvas.width,
66
-
canvas.height,
67
-
);
66
+
const allPixels = ctx.getImageData(0, 0, width, height);
68
67
// At least 10% of pixels have alpha <= 128
69
68
const hasAlpha =
70
69
allPixels.data.filter((pixel, i) => i % 4 === 3 && pixel <= 128)
···
76
75
avatarRef.current.classList.add('has-alpha');
77
76
}
78
77
alphaCache[url] = hasAlpha;
78
+
ctx.clearRect(0, 0, width, height);
79
79
} catch (e) {
80
80
// Silent fail
81
81
alphaCache[url] = false;