More queueMicrotask

This commit is contained in:
Lim Chee Aun 2023-12-28 10:50:54 +08:00
parent f645815b84
commit 7fb0044471

View file

@ -62,29 +62,32 @@ function Avatar({ url, size, alt = '', squircle, ...props }) {
if (avatarRef.current) avatarRef.current.dataset.loaded = true; if (avatarRef.current) avatarRef.current.dataset.loaded = true;
if (alphaCache[url] !== undefined) return; if (alphaCache[url] !== undefined) return;
if (isMissing) return; if (isMissing) return;
try { queueMicrotask(() => {
// Check if image has alpha channel try {
const { width, height } = e.target; // Check if image has alpha channel
if (canvas.width !== width) canvas.width = width; const { width, height } = e.target;
if (canvas.height !== height) canvas.height = height; if (canvas.width !== width) canvas.width = width;
ctx.drawImage(e.target, 0, 0); if (canvas.height !== height) canvas.height = height;
const allPixels = ctx.getImageData(0, 0, width, height); ctx.drawImage(e.target, 0, 0);
// At least 10% of pixels have alpha <= 128 const allPixels = ctx.getImageData(0, 0, width, height);
const hasAlpha = // At least 10% of pixels have alpha <= 128
allPixels.data.filter((pixel, i) => i % 4 === 3 && pixel <= 128) const hasAlpha =
.length / allPixels.data.filter(
(allPixels.data.length / 4) > (pixel, i) => i % 4 === 3 && pixel <= 128,
0.1; ).length /
if (hasAlpha) { (allPixels.data.length / 4) >
// console.log('hasAlpha', hasAlpha, allPixels.data); 0.1;
avatarRef.current.classList.add('has-alpha'); if (hasAlpha) {
// console.log('hasAlpha', hasAlpha, allPixels.data);
avatarRef.current.classList.add('has-alpha');
}
alphaCache[url] = hasAlpha;
ctx.clearRect(0, 0, width, height);
} catch (e) {
// Silent fail
alphaCache[url] = false;
} }
alphaCache[url] = hasAlpha; });
ctx.clearRect(0, 0, width, height);
} catch (e) {
// Silent fail
alphaCache[url] = false;
}
}} }}
/> />
)} )}