Comic Image Editor MVP

Local browser-based editor for clearing text from comic images and placing translated text back on top.

GitHub Pages

This repository can be hosted directly with GitHub Pages. The workflow in .github/workflows/pages.yml publishes only the static browser editor files, bundled fonts, .nojekyll, and CNAME.

The included CNAME is:

image-editor.chtoes.li

For DNS, create a CNAME record:

image-editor.chtoes.li -> <your-github-user-or-org>.github.io

Then enable GitHub Pages for the repository using GitHub Actions as the publishing source.

Run

From this directory:

python3 -m http.server 4173

Open:

http://localhost:4173

Use Chrome or Edge. The app uses the browser File System Access API to read and write a folder you choose.

Folder opening/saving depends on window.showDirectoryPicker, which is currently available only in Chromium-based desktop browsers such as Chrome and Edge, and only from HTTPS or localhost. Firefox, Safari, mobile browsers, embedded browser previews, and non-secure HTTP pages will not be able to open a local folder for read/write access.

Folder Layout

Put original images and optionally one font file in the same folder:

sample.png
my-font.ttf

Fonts placed beside the editor files are also loaded automatically. The app currently looks for:

SarcasmInk.otf
SarcasmInk bold.otf
SarcasmInk semibold.otf

For sample.png, the app saves:

sample.clean.png
sample.mask.png
sample.meta.json
sample.text.json
sample.translated.png

sample.clean.png is the cleared image. sample.mask.png stores the erased areas as a white mask. sample.meta.json stores text box positions, styling, and a simple list of cleared operations. sample.text.json stores key-value translated text. sample.translated.png is the rendered output.

Current Limits

Transparent erase is enabled by default for transparent PNGs. Disable it to fill erased areas with the selected color. The Bg color changes only the editor preview background, which helps when cleaning transparent images. The app autosaves after edits and before switching images. It does not do smart inpainting yet. Text boxes can be moved by dragging and resized numerically in the inspector.

You can zoom with the toolbar buttons or by scrolling over the image. Selected text boxes have a bottom-right resize handle. Text style supports normal, semibold, bold, italic, semibold italic, and bold italic. New text boxes start narrow, expand as text is typed, and grow taller when the text contains new lines.

The export scale selector renders from the original image at a higher resolution, replays stored cleared areas, applies the saved transparent mask when safe, draws scaled text, then downscales back to the original size with a shared Lanczos filter. 20x is the default export scale; use 1x only when you want normal export. Use Preview export to render the same pipeline into the editor view before saving the PNG.

Ctrl+Z undoes the previous edit while not in export preview. New text boxes start empty at one-line height and expand as you type.

Tests

Install Node dependencies:

npm ci

Run renderer tests:

npm test

npm run test:skia renders the bundled fixture twice with the Skia renderer at 20x and verifies deterministic PNG output. npm run test:browser also renders with Chrome/Chromium and checks that browser output stays close to Skia output.

Command-line Rendering

The command-line renderers read the same files as the browser editor:

<name>.png
<name>.mask.png
<name>.meta.json
<name>.text.json

The recommended production renderer is Skia at 20x with Lanczos downscaling. This is close enough to the browser export to be visually indistinguishable in current tests, without launching Chrome for every image.

Example:

cd /mnt/e/documents/comic_editor

node render_comic_image_skia.mjs \
  /mnt/e/documents/website/content/uploads/156-electrofishing-for-whales \
  arrest \
  --scale 20 \
  --resample lanczos \
  --output arrest.translated.png

Force a specific font style, useful for testing whether the selected font file is actually different:

node render_comic_image_skia.mjs \
  /mnt/e/documents/website/content/uploads/156-electrofishing-for-whales \
  arrest \
  --force-style semibold \
  --scale 20 \
  --resample lanczos \
  --output arrest.skia-semibold-20x.png

Render with the browser canvas implementation for comparison/reference:

node render_comic_image_browser.js \
  /mnt/e/documents/website/content/uploads/156-electrofishing-for-whales \
  arrest \
  --force-style semibold \
  --scale 20 \
  --output arrest.browser-semibold-20x.png

Compare two rendered PNGs and write a visual diff plus JSON report:

./render_comic_image.py \
  /mnt/e/documents/website/content/uploads/156-electrofishing-for-whales \
  arrest \
  --compare-only arrest.browser-semibold-20x.png \
  --diff-with arrest.skia-semibold-20x.png \
  --diff-output arrest.browser-vs-skia-semibold-20x.diff.png \
  --report /mnt/e/documents/website/content/uploads/156-electrofishing-for-whales/arrest.browser-vs-skia-semibold-20x.report.json

If node is installed through nvm, load it before running the Skia renderer:

. "$HOME/.nvm/nvm.sh"
nvm use --lts

The browser renderer expects Chrome. On WSL it currently auto-detects the Windows Chrome install at:

/mnt/c/Program Files/Google/Chrome/Application/chrome.exe

You can override input files when needed:

node render_comic_image_skia.mjs /path/to/folder image-name \
  --base image-name.png \
  --mask image-name.mask.png \
  --meta image-name.meta.json \
  --text image-name.text.json \
  --output image-name.translated.png \
  --scale 20 \
  --resample lanczos