this repo has no description
More queueMicrotask
+25
-22
+25
-22
src/components/avatar.jsx
+25
-22
src/components/avatar.jsx
···
62
62
if (avatarRef.current) avatarRef.current.dataset.loaded = true;
63
63
if (alphaCache[url] !== undefined) return;
64
64
if (isMissing) return;
65
-
try {
66
-
// Check if image has alpha channel
67
-
const { width, height } = e.target;
68
-
if (canvas.width !== width) canvas.width = width;
69
-
if (canvas.height !== height) canvas.height = height;
70
-
ctx.drawImage(e.target, 0, 0);
71
-
const allPixels = ctx.getImageData(0, 0, width, height);
72
-
// At least 10% of pixels have alpha <= 128
73
-
const hasAlpha =
74
-
allPixels.data.filter((pixel, i) => i % 4 === 3 && pixel <= 128)
75
-
.length /
76
-
(allPixels.data.length / 4) >
77
-
0.1;
78
-
if (hasAlpha) {
79
-
// console.log('hasAlpha', hasAlpha, allPixels.data);
80
-
avatarRef.current.classList.add('has-alpha');
65
+
queueMicrotask(() => {
66
+
try {
67
+
// Check if image has alpha channel
68
+
const { width, height } = e.target;
69
+
if (canvas.width !== width) canvas.width = width;
70
+
if (canvas.height !== height) canvas.height = height;
71
+
ctx.drawImage(e.target, 0, 0);
72
+
const allPixels = ctx.getImageData(0, 0, width, height);
73
+
// At least 10% of pixels have alpha <= 128
74
+
const hasAlpha =
75
+
allPixels.data.filter(
76
+
(pixel, i) => i % 4 === 3 && pixel <= 128,
77
+
).length /
78
+
(allPixels.data.length / 4) >
79
+
0.1;
80
+
if (hasAlpha) {
81
+
// console.log('hasAlpha', hasAlpha, allPixels.data);
82
+
avatarRef.current.classList.add('has-alpha');
83
+
}
84
+
alphaCache[url] = hasAlpha;
85
+
ctx.clearRect(0, 0, width, height);
86
+
} catch (e) {
87
+
// Silent fail
88
+
alphaCache[url] = false;
81
89
}
82
-
alphaCache[url] = hasAlpha;
83
-
ctx.clearRect(0, 0, width, height);
84
-
} catch (e) {
85
-
// Silent fail
86
-
alphaCache[url] = false;
87
-
}
90
+
});
88
91
}}
89
92
/>
90
93
)}