// Viewport capture document.getElementById('viewportBtn').addEventListener('click', async () => { try { showNotification('Capturing viewport...'); const screenshot = await ElementScreenshot.captureViewport(); showPreview(screenshot); await ScreenshotSaver.saveToClipboard(screenshot); showNotification('Screenshot copied to clipboard!'); } catch (error) { showNotification('Failed to capture viewport', 'error'); } });
// Keyboard shortcut: Ctrl+Shift+S document.addEventListener('keydown', async (e) => { if (e.ctrlKey && e.shiftKey && e.key === 'S') { e.preventDefault(); document.getElementById('fullScreenBtn').click(); } }); print screen command
.screenshot-btn:hover { background: #45a049; transform: translateY(-2px); } // Viewport capture document
.preview-modal img { max-width: 100%; height: auto; } async () =>
<!-- Example element to capture --> <div id="captureCard" style="margin: 50px auto; width: 400px; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 16px; color: white; text-align: center;"> <h2>Sample Card</h2> <p>This is a demo card that can be captured!</p> <img src="https://via.placeholder.com/100" alt="Demo" style="border-radius: 50%;"> </div>
const captureFullScreen = async () => { setLoading(true); try { const stream = await navigator.mediaDevices.getDisplayMedia({ video: { mediaSource: "screen" } }); const video = document.createElement('video'); video.srcObject = stream; await video.play(); const canvas = document.createElement('canvas'); canvas.width = video.videoWidth; canvas.height = video.videoHeight; canvas.getContext('2d').drawImage(video, 0, 0); const dataUrl = canvas.toDataURL('image/png'); setScreenshot(dataUrl); stream.getTracks().forEach(track => track.stop()); } catch (error) { console.error('Capture failed:', error); } finally { setLoading(false); } };
const captureElement = async (elementId) => { setLoading(true); try { const element = document.getElementById(elementId); const canvas = await html2canvas(element, { scale: 2, backgroundColor: null }); setScreenshot(canvas.toDataURL('image/png')); } catch (error) { console.error('Element capture failed:', error); } finally { setLoading(false); } };