Install
openclaw skills install @changyogpt-code/html2screenshotHTML 网页长截图技能。将任意 HTML(文件路径、URL 或 HTML 字符串)转换为完整长图(PNG),不失真不变形。触发词:html截图、网页截图、长截图、完整页面截图、把网页转成图片。
openclaw skills install @changyogpt-code/html2screenshot将任意 HTML 网页(完整文档或片段)转换为完整长图(PNG),不失真、不变形。
核心能力:
启动服务(后台常驻):
NODE_PATH=/Users/zhangyao/.local/lib/node_modules \
node ~/.openclaw/workspace/skills/html2screenshot/server.cjs &
Ctrl+Enter 快捷截图检查服务状态:
lsof -i :3134 | grep LISTEN
用户提供 HTML 文件路径时,用 Puppeteer 直接截图:
NODE_PATH=/Users/zhangyao/.local/lib/node_modules node - <<'EOF'
const puppeteer = require('puppeteer');
const fs = require('fs');
(async () => {
const html = fs.readFileSync('/Users/zhangyao/Downloads/xxx.html', 'utf8');
const OUTPUT = '/tmp/screenshot.png';
const browser = await puppeteer.launch({
headless: true,
executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
args: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-dev-shm-usage', '--disable-gpu']
});
const page = await browser.newPage();
await page.setViewport({ width: 390, height: 844, deviceScaleFactor: 2 });
await page.setContent(html, { waitUntil: 'load' });
const dims = await page.evaluate(() => ({
width: Math.ceil(document.body.scrollWidth),
height: Math.ceil(document.body.scrollHeight),
}));
await page.setViewport({ width: dims.width, height: dims.height, deviceScaleFactor: 2 });
await page.evaluate(() => window.stop());
await page.screenshot({ type: 'png', fullPage: true }).then(s => {
fs.writeFileSync(OUTPUT, s);
console.log('✅ Done: ' + OUTPUT + ' ' + (s.length/1024).toFixed(0) + 'KB');
});
await browser.close();
})();
EOF
Request:
{
"html": "<!DOCTYPE html>...",
"viewport": { "width": 390, "height": 844 },
"deviceScaleFactor": 2
}
Response:PNG 二进制
| 参数 | 默认值 | 说明 |
|---|---|---|
width | 1280 | viewport 宽度(px) |
height | 800 | viewport 高度(px) |
deviceScaleFactor | 2 | 缩放倍数(1=1x, 2=2x高清) |
fullPage | true | 截取整个可滚动区域 |
/Users/zhangyao/.local/lib/node_modules/puppeteer/Applications/Google Chrome.app/Applications/Google Chrome.app/Contents/MacOS/Google Chromenetworkidle0 超时问题:改用 waitUntil: 'load'