LearnChineseMemeGenerator

Chinese Learning Meme Generator

A tiny, privacy-first single-page web app for making annotated memes that help you learn Chinese.

Why I made this

• To merge two fun activities: creating bold, shareable memes and practicing Chinese vocabulary/grammar.
• I wanted a tool that makes it quick to annotate images (arrows, stickers, captions) while supporting Chinese fonts, pinyin/translation area, and a simple export flow — all client-side so your images never leave your browser.

What it does

• Drag & drop an image or GIF, add a top caption, draw arrows to highlight parts of the image, and drop editable text stickers anywhere on the canvas.
• Supports different font choices tailored for English and Chinese display fonts, plus a small caption area for pinyin or translations.
• Previews animated GIFs in-page; export currently saves a single-frame PNG with overlays. An optional animated GIF re-encoding flow exists in the code and can be enabled when desired.

How it works (technical overview)

• Modular ES modules keep responsibilities small and readable: the app wires modules together from js/main.js.
  • Core wiring and state: js/main.js
  • Canvas rendering, DPR scaling, caption layout, and arrow rendering: js/canvas.js
  • Sticker DOM and interactions: js/stickers.js
  • Drag & drop and small SFX helpers: js/dragdrop.js
  • Export (single-frame + optional animated GIF re-encode): js/export.js
  • Helpers: js/utils.js
• The canvas is sized to device pixel ratio (DPR) for crisp exports and draws three layers: the image, caption boxes (top + small bottom), and overlays (arrows + stickers).
• Stickers are regular DOM elements for easy editing/dragging; they are rasterized onto the export canvas so the downloaded image includes them.
• GIF handling: the UI previews animated GIFs. The export path supports per-frame re-encoding with a client-side encoder if gif decoding/encoder libs are available — this preserves frame timing but is CPU-intensive.

Why it’s cool

• Made for learners: the small caption area and sticker system make it trivial to add pinyin, translations, or notes without re-opening an image editor.
• Fast, zero-upload workflow: everything runs in the browser; no server upload is required for standard PNG exports.
• Playful interactions: live arrow drawing and draggable, editable stickers make the app enjoyable to use for quick social posts or study cards.
• Small, modular codebase: each feature lives in a short ES module, so it’s easy to extend (resize/rotate stickers, integrate OCR, or add a dedicated animated-GIF export option).

Usage (quick)

1. Open index.html.
2. Drop an image/GIF or click Choose File.
3. Pick a font, type a top caption, add stickers, draw arrows.
4. Click Export to download the composed PNG.

Where to look in the code

• App entry & wiring: js/main.js
• Rendering and layout: js/canvas.js
• Sticker UI and DOM behavior: js/stickers.js
• Export & animated GIF logic: js/export.js
• Quick instructions and notes: README.md

Ideas / Next steps

• Add sticker rotate/resize handles and update the export rasterization.
• Make animated-GIF export robust with performance safeguards (frame limits, size warnings) and update tests to validate multi-frame output.
• Add a shareable preset system (save sticker layouts and captions) for flashcard-style reuse.

If you want, I can (1) implement sticker resize/rotate, (2) enable and optimize animated GIF export, or (3) add a short CONTRIBUTING guide. Which should I do next?