const puppeteer = require('puppeteer');
const html = `
Cinematic Motion Graphics 30s
MOTION
DESIGN • RHYTHM • STORY
`;
(async () => {
const browser = await puppeteer.launch({ headless: 'new', args: ['--no-sandbox', '--disable-gpu'] });
const page = await browser.newPage();
await page.setViewport({ width: 1920, height: 1080 });
await page.setContent(html);
// Wait for 1 second of animation
await new Promise(r => setTimeout(r, 1000));
// Simulate the injection
await page.evaluate(() => {
const c = document.querySelector('canvas');
const dataUrl = c.toDataURL('image/png');
let img = document.getElementById('test-img');
if(!img) {
img = document.createElement('img');
img.id = 'test-img';
img.style.position = 'fixed';
img.style.pointerEvents = 'none';
const computedStyle = window.getComputedStyle(c);
img.style.zIndex = computedStyle.zIndex || '0';
c.parentNode.insertBefore(img, c.nextSibling);
}
img.src = dataUrl;
const rect = c.getBoundingClientRect();
img.style.left = rect.left + 'px';
img.style.top = rect.top + 'px';
img.style.width = rect.width + 'px';
img.style.height = rect.height + 'px';
c.style.visibility = 'hidden';
});
await page.screenshot({ path: 'test_html2.jpg' });
await browser.close();
})();