Screenshot Tool

Convert HTML code to screenshots

Width: px

Scale:

Background:

Enter any HTML code. It will be rendered and captured as a screenshot.

Enter HTML code and click "Preview" to see the result

Waiting for input...

How to Use

1

Enter Input

Enter your input in the input area above.

2

Configure Options

Configure any options if available.

3

Process

Click the convert/process button.

4

Get Result

View the result in the output area.

' + html + ' '); doc.close(); document.getElementById('previewStatus').textContent = 'Preview loaded'; showToast('Preview updated'); } async function captureScreenshot() { const html = document.getElementById('htmlInput').value.trim(); if (!html) { showToast('Please enter HTML code first'); return; } document.getElementById('previewStatus').textContent = 'Capturing...'; try { // Create a temporary container to render const container = document.createElement('div'); container.style.cssText = 'position:absolute;left:-9999px;top:0;width:' + (parseInt(document.getElementById('captureWidth').value) || 800) + 'px'; container.innerHTML = html; document.body.appendChild(container); const scale = parseInt(document.getElementById('captureScale').value) || 2; const bg = document.getElementById('captureBg').value; // Check if html2canvas is available if (typeof html2canvas === 'undefined') { showToast('html2canvas library not loaded. Please check your internet connection.'); document.body.removeChild(container); return; } const canvas = await html2canvas(container, { scale: scale, useCORS: true, allowTaint: true, backgroundColor: bg === 'transparent' ? null : bg, logging: false }); document.body.removeChild(container); screenshotDataUrl = canvas.toDataURL('image/png'); // Show result const previewArea = document.getElementById('previewArea'); previewArea.innerHTML = '

Screenshot

'; document.getElementById('previewStatus').textContent = 'Screenshot captured (' + canvas.width + ' x ' + canvas.height + ')'; document.getElementById('btnDownload').style.display = 'inline-flex'; showToast('Screenshot captured successfully'); } catch (err) { document.getElementById('previewStatus').textContent = 'Error: ' + err.message; showToast('Capture failed: ' + err.message); } } function downloadScreenshot() { if (!screenshotDataUrl) { showToast('No screenshot to download'); return; } const a = document.createElement('a'); a.href = screenshotDataUrl; a.download = 'screenshot_' + Date.now() + '.png'; a.click(); showToast('Screenshot downloaded'); } function clearAll() { document.getElementById('htmlInput').value = ''; if (previewFrame) { previewFrame.contentDocument.body.innerHTML = ''; } document.getElementById('previewArea').innerHTML = '

Enter HTML code and click "Preview" to see the result

'; document.getElementById('btnDownload').style.display = 'none'; screenshotDataUrl = null; document.getElementById('previewStatus').textContent = 'Waiting for input...'; lucide.createIcons(); }