Meme Generator
Add top and bottom text to images with font controls.
Meme Generator adds top and bottom caption text to any image — "Add top and bottom text to create memes from any image." Type into "Top Text" and "Bottom Text" (placeholders "Top text..." / "Bottom text..."), pick a Font from Impact, Arial Black, Comic Sans MS, Verdana, Georgia, and Times New Roman, then tune "Font Size" (12–120), "Text Color", "Stroke Color", and "Stroke Width" (0–10). "Generate Meme" paints both blocks onto the source at natural size.
Text auto-word-wraps at 90% of the canvas width; the top block anchors 20px from the top with textBaseline top, and the bottom block computes its total height to sit 20px from the bottom edge. The defaults — Impact at 48px, white fill, black stroke of 3 — match the classic meme look. Export keeps PNG for PNG sources and otherwise re-encodes JPEG 0.92, all locally on canvas.
How it works
lib/imageMeme.ts draws the source at natural size, then drawMemeText wraps each caption to 90% canvas width, centers it horizontally, and places the top block at y=20 (textBaseline top). For the bottom block it measures the wrapped lines' total height and anchors the stack 20px above the lower edge. When strokeWidth > 0, strokeText runs before fillText so the outline sits under the fill.
The font string is `bold {fontSize}px {fontFamily}, sans-serif`. Zod defaults: fontSize 48 (12–120), fontFamily 'Impact', textColor #ffffff, strokeColor #000000, strokeWidth 3 (0–10). Export is toBlob PNG for PNG sources else JPEG 0.92 with the original filename. No network, no AI — fully local canvas rendering.
How to use
- Drop one image (accept image/*; single file).
- Type into "Top Text" and/or "Bottom Text" (placeholders "Top text..." / "Bottom text...").
- Adjust "Font Size" (12–120) and pick a "Font" (Impact, Arial Black, Comic Sans MS, Verdana, Georgia, Times New Roman).
- Tune "Text Color", "Stroke Color", and "Stroke Width" (0–10).
- Click "Generate Meme" (button reads "Generating..."; toast "Meme created!").
- Compare the "Original" vs "Result" file sizes.
- Click "Download" for the captioned image, or "Start Over" to reset.
Tips
- Defaults (Impact, white fill, black stroke 3) match classic meme style — start there and tweak.
- Stroke Width 0 disables the outline — hard to read on busy images, but clean on plain backgrounds.
- Long text auto-wraps at 90% of canvas width; bottom text grows upward from the bottom edge (20px margin).
- Fonts must exist on the viewer's system for canvas rendering — Impact/Arial Black are common; exotic choices fall back to sans-serif.
Meme Generator FAQ
Does the text wrap?
Yes — word-wrap at 90% canvas width for both the top and bottom blocks.
Can I use zero outline?
Yes — Stroke Width 0 skips the strokeText pass entirely.
What's the default font?
Impact at 48px, white fill, black stroke of 3 — the classic meme defaults.
Is the meme uploaded?
No — text is painted on a local canvas; there is no network and no AI.
Which format downloads?
PNG when the source is PNG, otherwise JPEG 0.92 with the original filename.
Credits
- Canvas 2D API — Caption word-wrap, stroke/fill text, and export