Html to images skill

HTML to Images Skill

Export any single-file HTML slide deck as individual PNG images. Each slide becomes its own file: slide-01.png, slide-02.png, etc.

How It Works

1. Headless Chrome renders the full HTML page at once (fullPage: true) → one tall PNG
2. Pillow slices it into N equal strips and saves each as a numbered PNG

No PPTX, no python-pptx. Just clean image files ready for anywhere.

---

Requirements

Tool	Install
Node.js	https://nodejs.org
Python 3	https://python.org
Puppeteer	npm install puppeteer (auto-handled)
Pillow	pip install pillow
Chrome or Edge	Already installed on most systems

---

Step-by-Step Instructions

1. Ask the user for inputs

You need:

• HTML file path — the source presentation
• Number of slides — how many slides the deck has
• Output folder — where to save the images (default: a slides/ subfolder next to the HTML)
• Output format — PNG (default) or JPEG
• Resolution — default 1920×1080. Ask only if they want something different (e.g. 2560×1440 for retina, 1080×1080 for square social).

Auto-detect Chrome from these paths (check in order):

• C:/Program Files/Google/Chrome/Application/chrome.exe
• C:/Program Files (x86)/Google/Chrome/Application/chrome.exe
• C:/Program Files (x86)/Microsoft/Edge/Application/msedge.exe
• /usr/bin/google-chrome
• /usr/bin/chromium-browser

2. Install puppeteer if needed

node -e "require('puppeteer')" 2>&1
npm install puppeteer --save-dev

3. Write the screenshot script

Write _screenshot.mjs to the same folder as the HTML:

import puppeteer from 'puppeteer';
import path from 'path';
import { fileURLToPath } from 'url';

const __dirname = path.dirname(fileURLToPath(import.meta.url));
const HTML_PATH = path.join(__dirname, '<HTML_FILENAME>');
const W = <WIDTH>;   // e.g. 1920
const H = <HEIGHT>;  // e.g. 1080

const browser = await puppeteer.launch({
  executablePath: '<CHROME_PATH>',
  headless: true,
  args: ['--no-sandbox', `--window-size=${W},${H}`],
});

const page = await browser.newPage();
await page.setViewport({ width: W, height: H, deviceScaleFactor: 1 });
await page.goto(`file:///${HTML_PATH.replace(/\\/g, '/')}`, {
  waitUntil: 'networkidle0',
  timeout: 30000,
});

// Wait for fonts and transitions to settle
await new Promise(r => setTimeout(r, 2500));

// Freeze animations, hide fixed UI chrome
await page.addStyleTag({ content: `
  * { animation: none !important; transition: none !important; }
  body::after { display: none !important; }
  #nav, #progress, nav, header[data-fixed] { display: none !important; }
` });

await page.screenshot({
  path: path.join(__dirname, '_fullpage.png'),
  fullPage: true,
});

console.log('Full page captured.');
await browser.close();

4. Write the slice script

Write _slice_images.py to the same folder:

from PIL import Image
import os

FOLDER   = r'<FOLDER_PATH>'
FULLPAGE = os.path.join(FOLDER, '_fullpage.png')
OUT_DIR  = os.path.join(FOLDER, '<OUTPUT_SUBFOLDER>')  # e.g. 'slides'
SLIDES   = <SLIDE_COUNT>
FORMAT   = '<FORMAT>'  # 'PNG' or 'JPEG'
EXT      = 'jpg' if FORMAT == 'JPEG' else 'png'

os.makedirs(OUT_DIR, exist_ok=True)

img = Image.open(FULLPAGE)
W, H = img.size
slide_h = H // SLIDES

print(f"Full image: {W}x{H}, {SLIDES} slides, {slide_h}px each")
print(f"Saving to: {OUT_DIR}")

for i in range(SLIDES):
    top  = i * slide_h
    crop = img.crop((0, top, W, top + slide_h))
    out_path = os.path.join(OUT_DIR, f'slide-{i+1:02d}.{EXT}')
    if FORMAT == 'JPEG':
        crop = crop.convert('RGB')  # JPEG does not support transparency
        crop.save(out_path, format=FORMAT, quality=95)
    else:
        crop.save(out_path, format=FORMAT)
    print(f"  Saved slide-{i+1:02d}.{EXT} (rows {top}-{top+slide_h})")

print(f"\nDone. {SLIDES} images saved to {OUT_DIR}/")

5. Run both scripts

node _screenshot.mjs
python _slice_images.py

6. Clean up temp files

After confirming the images look correct, delete:

• _fullpage.png
• _screenshot.mjs
• _slice_images.py

The output images in the slides/ folder are kept.

---

Output

slides/
├── slide-01.png
├── slide-02.png
├── slide-03.png
...
└── slide-10.png

---

Common Issues

Problem	Cause	Fix
All images identical	Using scroll + viewport clip	Always use fullPage: true + slice — never scroll
Slide count wrong	Slide height inconsistency in HTML	Ensure every slide is exactly 100vh
JPEG has black background	Transparency not supported by JPEG	Skill auto-converts to RGB before saving
Chrome not found	Wrong exe path	Check Edge as fallback