106 lines
2.8 KiB
JavaScript
106 lines
2.8 KiB
JavaScript
/**
|
|
* Diagram Capture Script
|
|
* Converts HTML diagrams to high-resolution PNGs using Playwright
|
|
*
|
|
* Usage:
|
|
* node capture-diagrams.js [html-file] [output-png]
|
|
* node capture-diagrams.js # Captures all diagrams in current directory
|
|
*
|
|
* Prerequisites:
|
|
* npm install playwright
|
|
* npx playwright install chromium
|
|
*/
|
|
|
|
const { chromium } = require('playwright');
|
|
const path = require('path');
|
|
const fs = require('fs');
|
|
|
|
// Configuration
|
|
const CONFIG = {
|
|
deviceScaleFactor: 2, // 2x for retina quality
|
|
selector: '.diagram-container', // Default container selector
|
|
};
|
|
|
|
/**
|
|
* Capture a single HTML file to PNG
|
|
*/
|
|
async function captureScreenshot(htmlPath, pngPath, selector = CONFIG.selector) {
|
|
const browser = await chromium.launch();
|
|
const context = await browser.newContext({
|
|
deviceScaleFactor: CONFIG.deviceScaleFactor,
|
|
});
|
|
const page = await context.newPage();
|
|
|
|
const absoluteHtmlPath = path.resolve(htmlPath);
|
|
console.log(`Capturing ${htmlPath}...`);
|
|
|
|
await page.goto(`file://${absoluteHtmlPath}`);
|
|
|
|
const element = await page.locator(selector);
|
|
await element.screenshot({
|
|
path: pngPath,
|
|
type: 'png',
|
|
});
|
|
|
|
console.log(` → Saved to ${pngPath}`);
|
|
await browser.close();
|
|
}
|
|
|
|
/**
|
|
* Capture all HTML diagrams in a directory
|
|
*/
|
|
async function captureAllDiagrams(directory = '.') {
|
|
const browser = await chromium.launch();
|
|
const context = await browser.newContext({
|
|
deviceScaleFactor: CONFIG.deviceScaleFactor,
|
|
});
|
|
const page = await context.newPage();
|
|
|
|
// Find all *_diagram*.html files
|
|
const files = fs.readdirSync(directory)
|
|
.filter(f => f.endsWith('.html') && f.includes('diagram'));
|
|
|
|
if (files.length === 0) {
|
|
console.log('No diagram HTML files found in directory');
|
|
await browser.close();
|
|
return;
|
|
}
|
|
|
|
for (const htmlFile of files) {
|
|
const htmlPath = path.join(directory, htmlFile);
|
|
const pngPath = htmlPath.replace('.html', '.png');
|
|
|
|
console.log(`Capturing ${htmlFile}...`);
|
|
await page.goto(`file://${path.resolve(htmlPath)}`);
|
|
|
|
try {
|
|
const element = await page.locator(CONFIG.selector);
|
|
await element.screenshot({ path: pngPath, type: 'png' });
|
|
console.log(` → Saved to ${path.basename(pngPath)}`);
|
|
} catch (error) {
|
|
console.log(` ✗ Failed: ${error.message}`);
|
|
}
|
|
}
|
|
|
|
await browser.close();
|
|
console.log('\nAll diagrams captured successfully!');
|
|
}
|
|
|
|
// Main execution
|
|
async function main() {
|
|
const args = process.argv.slice(2);
|
|
|
|
if (args.length === 2) {
|
|
// Single file mode: node capture-diagrams.js input.html output.png
|
|
await captureScreenshot(args[0], args[1]);
|
|
} else if (args.length === 1) {
|
|
// Directory mode: node capture-diagrams.js ./docs
|
|
await captureAllDiagrams(args[0]);
|
|
} else {
|
|
// Default: capture all diagrams in current directory
|
|
await captureAllDiagrams('.');
|
|
}
|
|
}
|
|
|
|
main().catch(console.error);
|