File size: 2,661 Bytes
94193b5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | /**
* Project Thumbnail Capture Utility
* Compiles a project via VirtualServer, renders in a hidden iframe,
* and captures a screenshot. Returns base64 data URL.
*/
import { vfs } from '@/lib/vfs';
import { VirtualServer } from '@/lib/preview/virtual-server';
import { captureIframeScreenshot } from './screenshot';
export async function captureProjectScreenshot(projectId: string): Promise<string | null> {
await vfs.init();
const project = await vfs.getProject(projectId);
const server = new VirtualServer(vfs, projectId, { runtime: project?.settings?.runtime });
let compiled;
try {
compiled = await server.compileProject();
} catch {
server.cleanupBlobUrls();
return null;
}
const indexFile = compiled.files.find(f => f.path === '/index.html');
if (!indexFile) {
server.cleanupBlobUrls();
return null;
}
let html = typeof indexFile.content === 'string'
? indexFile.content
: new TextDecoder().decode(indexFile.content as ArrayBuffer);
// Replace CSS href with blob URLs
html = html.replace(/href="([^"]+\.css)"/g, (match, href) => {
if (href.startsWith('http') || href.startsWith('//')) return match;
const path = href.startsWith('/') ? href : '/' + href;
const blobUrl = compiled.blobUrls.get(path);
return blobUrl ? `href="${blobUrl}"` : match;
});
// Replace JS src with blob URLs
html = html.replace(/src="([^"]+\.js)"/g, (match, src) => {
if (src.startsWith('http') || src.startsWith('//')) return match;
const path = src.startsWith('/') ? src : '/' + src;
const blobUrl = compiled.blobUrls.get(path);
return blobUrl ? `src="${blobUrl}"` : match;
});
// Replace image src with blob URLs
html = html.replace(/src="([^"]+\.(png|jpg|jpeg|gif|svg|webp))"/gi, (match, imgPath) => {
const path = imgPath.startsWith('/') ? imgPath : '/' + imgPath;
const blobUrl = compiled.blobUrls.get(path);
return blobUrl ? `src="${blobUrl}"` : match;
});
const iframe = document.createElement('iframe');
iframe.style.position = 'fixed';
iframe.style.top = '-10000px';
iframe.style.left = '-10000px';
iframe.style.width = '1280px';
iframe.style.height = '720px';
iframe.style.border = 'none';
document.body.appendChild(iframe);
try {
await new Promise<void>((resolve) => {
iframe.onload = () => resolve();
iframe.srcdoc = html;
});
// Let the page render
await new Promise(r => setTimeout(r, 1500));
return await captureIframeScreenshot(iframe, 1280, 720, 640, 360, 0.8, false);
} finally {
if (iframe.parentElement) document.body.removeChild(iframe);
server.cleanupBlobUrls();
}
}
|