import './avatar.css'; import { useRef } from 'preact/hooks'; const SIZES = { s: 16, m: 20, l: 24, xl: 32, xxl: 50, xxxl: 64, }; const alphaCache = {}; function Avatar({ url, size, alt = '', ...props }) { size = SIZES[size] || size || SIZES.m; const avatarRef = useRef(); return ( {!!url && ( {alt} { e.target.crossOrigin = null; e.target.src = url; }} onLoad={(e) => { avatarRef.current.dataset.loaded = true; try { // Check if image has alpha channel const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.width = e.target.width; canvas.height = e.target.height; ctx.drawImage(e.target, 0, 0); const allPixels = ctx.getImageData( 0, 0, canvas.width, canvas.height, ); const hasAlpha = allPixels.data.some((pixel, i) => { return i % 4 === 3 && pixel !== 255; }); if (hasAlpha) { avatarRef.current.classList.add('has-alpha'); alphaCache[url] = true; } } catch (e) { // Ignore } }} /> )} ); } export default Avatar;