// Slack/Discord Emoji Maker — resize, shape, adjust, and animate images for chat platforms. // Supports static PNG export and animated GIF via gif.js (CDN lazy-loaded). window.TOOL_HANDLERS['slack-emoji'] = function SlackEmojiTool() { const { useState, useRef, useEffect, useCallback, useMemo } = React; // --- state --- const [file, setFile] = useState(null); const [src, setSrc] = useState(''); const imgRef = useRef(null); // preset const PRESETS = useMemo(() => [ { id: 'slack', label: 'Slack', size: 128, maxKB: 128 }, { id: 'discord', label: 'Discord', size: 256, maxKB: 256 }, { id: 'twitch', label: 'Twitch', size: 112, maxKB: null }, { id: 'custom', label: 'Custom', size: null, maxKB: null }, ], []); const [presetId, setPresetId] = useState('slack'); const [customSize, setCustomSize] = useState(128); // static effects const [roundCorners, setRoundCorners] = useState(false); const [circleCrop, setCircleCrop] = useState(false); const [flipH, setFlipH] = useState(false); const [flipV, setFlipV] = useState(false); const [borderOn, setBorderOn] = useState(false); const [borderColor, setBorderColor] = useState('#2563eb'); const [borderWidth, setBorderWidth] = useState(4); const [brightness, setBrightness] = useState(0); const [contrast, setContrast] = useState(0); // animated effect const ANIM_EFFECTS = useMemo(() => [ { id: 'none', label: 'None', frames: 0, icon: 'x' }, { id: 'shake', label: 'Shake', frames: 6, icon: 'swap' }, { id: 'bounce', label: 'Bounce', frames: 8, icon: 'arrow' }, { id: 'spin', label: 'Spin', frames: 12, icon: 'rotate' }, { id: 'pulse', label: 'Pulse', frames: 8, icon: 'heart' }, { id: 'party', label: 'Party', frames: 10, icon: 'palette' }, ], []); const [animEffect, setAnimEffect] = useState('none'); const [speed, setSpeed] = useState('normal'); // quality / output const [quality, setQuality] = useState(90); const [outUrl, setOutUrl] = useState(''); const [outSize, setOutSize] = useState(0); const [generating, setGenerating] = useState(false); const isAnimated = animEffect !== 'none'; const preset = PRESETS.find(p => p.id === presetId); const outDim = preset.size || customSize; // speed to frame delay in ms const speedDelays = { slow: 120, normal: 70, fast: 35 }; const frameDelay = speedDelays[speed] || 70; // --- file handling --- const handleFile = async (f) => { if (!f || !f.type.startsWith('image/')) return; const { img, url } = await window.loadImageFromFile(f); imgRef.current = img; setFile(f); setSrc(url); setOutUrl(''); setOutSize(0); }; // --- draw a single frame on a canvas --- const drawFrame = useCallback((frameIndex, totalFrames) => { const img = imgRef.current; if (!img) return null; const size = outDim; const c = document.createElement('canvas'); c.width = size; c.height = size; const ctx = c.getContext('2d'); // clipping if (circleCrop) { ctx.beginPath(); ctx.arc(size / 2, size / 2, size / 2 - (borderOn ? borderWidth : 0), 0, Math.PI * 2); ctx.closePath(); ctx.clip(); } else if (roundCorners) { const r = size * 0.18; const inset = borderOn ? borderWidth : 0; roundRect(ctx, inset, inset, size - inset * 2, size - inset * 2, r); ctx.clip(); } // filter const filters = []; if (brightness !== 0) filters.push('brightness(' + (100 + brightness) + '%)'); if (contrast !== 0) filters.push('contrast(' + (100 + contrast) + '%)'); // party hue rotate if (animEffect === 'party' && totalFrames > 0) { const hue = Math.round((frameIndex / totalFrames) * 360); filters.push('hue-rotate(' + hue + 'deg)'); } if (filters.length) ctx.filter = filters.join(' '); ctx.save(); ctx.translate(size / 2, size / 2); // flip const sx = flipH ? -1 : 1; const sy = flipV ? -1 : 1; ctx.scale(sx, sy); // animation transforms let dx = 0, dy = 0, rot = 0, sc = 1; if (totalFrames > 0) { const t = frameIndex / totalFrames; if (animEffect === 'shake') { dx = Math.sin(t * Math.PI * 2) * size * 0.08; } else if (animEffect === 'bounce') { dy = -Math.abs(Math.sin(t * Math.PI * 2)) * size * 0.15; } else if (animEffect === 'spin') { rot = t * Math.PI * 2; } else if (animEffect === 'pulse') { sc = 1 + 0.15 * Math.sin(t * Math.PI * 2); } // party: hue handled via filter above } ctx.translate(dx, dy); ctx.rotate(rot); ctx.scale(sc, sc); // draw image centered and cover the square const iw = img.width, ih = img.height; const ratio = Math.max(size / iw, size / ih); const dw = iw * ratio, dh = ih * ratio; ctx.drawImage(img, -dw / 2, -dh / 2, dw, dh); ctx.restore(); // reset filter for border drawing ctx.filter = 'none'; // border if (borderOn && borderWidth > 0) { ctx.strokeStyle = borderColor; ctx.lineWidth = borderWidth; if (circleCrop) { ctx.beginPath(); ctx.arc(size / 2, size / 2, size / 2 - borderWidth / 2, 0, Math.PI * 2); ctx.stroke(); } else if (roundCorners) { const r = size * 0.18; roundRect(ctx, borderWidth / 2, borderWidth / 2, size - borderWidth, size - borderWidth, r); ctx.stroke(); } else { ctx.strokeRect(borderWidth / 2, borderWidth / 2, size - borderWidth, size - borderWidth); } } return c; }, [outDim, circleCrop, roundCorners, flipH, flipV, borderOn, borderColor, borderWidth, brightness, contrast, animEffect]); // rounded-rect helper function roundRect(ctx, x, y, w, h, r) { ctx.beginPath(); ctx.moveTo(x + r, y); ctx.lineTo(x + w - r, y); ctx.quadraticCurveTo(x + w, y, x + w, y + r); ctx.lineTo(x + w, y + h - r); ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h); ctx.lineTo(x + r, y + h); ctx.quadraticCurveTo(x, y + h, x, y + h - r); ctx.lineTo(x, y + r); ctx.quadraticCurveTo(x, y, x + r, y); ctx.closePath(); } // --- static PNG preview (debounced) --- useEffect(() => { if (!imgRef.current || isAnimated) return; const id = setTimeout(() => { const c = drawFrame(0, 0); if (!c) return; c.toBlob((blob) => { if (!blob) return; if (outUrl) URL.revokeObjectURL(outUrl); setOutUrl(URL.createObjectURL(blob)); setOutSize(blob.size); }, 'image/png'); }, 80); return () => clearTimeout(id); }, [file, outDim, circleCrop, roundCorners, flipH, flipV, borderOn, borderColor, borderWidth, brightness, contrast, isAnimated, drawFrame]); // --- generate GIF --- const generateGif = async () => { if (!imgRef.current) return; setGenerating(true); try { await window.loadScript('https://cdn.jsdelivr.net/npm/gif.js@0.2.0/dist/gif.js'); const workerBlob = await window.getGifWorkerBlob(); const eff = ANIM_EFFECTS.find(e => e.id === animEffect); const numFrames = eff ? eff.frames : 6; const gif = new GIF({ workers: 2, quality: Math.max(1, Math.round((110 - quality) / 5)), workerScript: workerBlob, width: outDim, height: outDim, transparent: null, }); for (let i = 0; i < numFrames; i++) { const c = drawFrame(i, numFrames); if (c) gif.addFrame(c, { delay: frameDelay, copy: true }); } const blob = await new Promise((resolve, reject) => { gif.on('finished', resolve); gif.on('error', reject); gif.render(); }); if (outUrl) URL.revokeObjectURL(outUrl); setOutUrl(URL.createObjectURL(blob)); setOutSize(blob.size); } catch (e) { console.error('GIF generation failed:', e); } finally { setGenerating(false); } }; // re-generate GIF whenever animated params change useEffect(() => { if (!imgRef.current || !isAnimated) return; generateGif(); }, [animEffect, speed, outDim, circleCrop, roundCorners, flipH, flipV, borderOn, borderColor, borderWidth, brightness, contrast, quality, file]); // --- download --- const download = () => { if (!outUrl) return; const base = file ? file.name.replace(/\.[^.]+$/, '') : 'emoji'; const ext = isAnimated ? 'gif' : 'png'; fetch(outUrl).then(r => r.blob()).then(blob => { window.downloadBlob(blob, base + '-emoji.' + ext); }); }; // --- size warning --- const sizeWarning = useMemo(() => { if (!outSize || !preset.maxKB) return null; const maxBytes = preset.maxKB * 1024; if (outSize > maxBytes) { return 'File is ' + window.fmtBytes(outSize) + ' — exceeds ' + preset.label + ' limit of ' + preset.maxKB + ' KB. Try lowering quality.'; } return null; }, [outSize, preset]); // --- CSS animation class for live preview --- const previewAnimStyle = useMemo(() => { if (!isAnimated) return {}; const dur = speed === 'slow' ? '1.2s' : speed === 'fast' ? '0.35s' : '0.7s'; const common = { animationDuration: dur, animationIterationCount: 'infinite', animationTimingFunction: 'ease-in-out' }; switch (animEffect) { case 'shake': return { ...common, animationName: 'se-shake' }; case 'bounce': return { ...common, animationName: 'se-bounce' }; case 'spin': return { ...common, animationName: 'se-spin', animationTimingFunction: 'linear' }; case 'pulse': return { ...common, animationName: 'se-pulse' }; case 'party': return { ...common, animationName: 'se-party' }; default: return {}; } }, [isAnimated, animEffect, speed]); const reset = () => { if (outUrl) URL.revokeObjectURL(outUrl); if (src) URL.revokeObjectURL(src); setFile(null); setSrc(''); setOutUrl(''); setOutSize(0); }; // --- render --- if (!file) { return React.createElement(window.Dropzone, { onFile: handleFile, title: 'Drop an image here', hint: 'PNG, JPG, WebP, GIF', accept: 'image/*', }); } return (
{/* Preview */}
Emoji preview
{outDim} x {outDim} {outSize > 0 && ( {window.fmtBytes(outSize)} )} {isAnimated ? 'GIF' : 'PNG'} {generating && ( Generating... )}
{sizeWarning && (
{sizeWarning}
)} {/* Platform presets */}
Platform
{PRESETS.map(p => ( ))}
{presetId === 'custom' && (
Size{customSize}px
setCustomSize(+e.target.value)} className="cmp-slider" />
)}
{/* Static effects */}
Shape & Adjustments
{borderOn && (
setBorderColor(e.target.value)} title="Border color" />
Width{borderWidth}px
setBorderWidth(+e.target.value)} className="cmp-slider" />
)}
Brightness{brightness > 0 ? '+' : ''}{brightness}
setBrightness(+e.target.value)} className="cmp-slider" />
Contrast{contrast > 0 ? '+' : ''}{contrast}
setContrast(+e.target.value)} className="cmp-slider" />
{/* Animated effects */}
Animation
{ANIM_EFFECTS.map(eff => (
setAnimEffect(eff.id)} >
{eff.label}
))}
{isAnimated && (
Speed
{['slow', 'normal', 'fast'].map(s => ( ))}
)}
{/* Quality */} {isAnimated && (
GIF Quality{quality}%
setQuality(+e.target.value)} className="cmp-slider" />
)} {/* Actions */}
); };