const downloadScreenshot = () => { if (screenshot) { const link = document.createElement('a'); link.download = `screenshot_${Date.now()}.png`; link.href = screenshot; link.click(); } };

1. Basic Print Screen - Captures Entire Screen class PrintScreenFeature { constructor() { this.canvas = null; this.stream = null; } // Capture entire screen async captureFullScreen() { try { const stream = await navigator.mediaDevices.getDisplayMedia({ video: { mediaSource: "screen", width: { ideal: 1920 }, height: { ideal: 1080 } }, audio: false }); this.stream = stream; const videoTrack = stream.getVideoTracks()[0]; // Create video element to capture frame const video = document.createElement('video'); video.srcObject = stream; await video.play(); // Capture frame const screenshot = await this.captureFrame(video); // Stop the stream videoTrack.stop(); stream.getTracks().forEach(track => track.stop()); return screenshot; } catch (error) { console.error('Error capturing screen:', error); throw error; } }

const copyToClipboard = async () => { if (screenshot) { const blob = await (await fetch(screenshot)).blob(); await navigator.clipboard.write([ new ClipboardItem({ [blob.type]: blob }) ]); alert('Copied to clipboard!'); } };

static async saveToServer(screenshot, endpoint) { const formData = new FormData(); formData.append('screenshot', screenshot.blob, `screenshot_${Date.now()}.png`); try { const response = await fetch(endpoint, { method: 'POST', body: formData }); return await response.json(); } catch (error) { console.error('Failed to save to server:', error); throw error; } } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Print Screen Feature</title> <style> .screenshot-container { position: fixed; bottom: 20px; right: 20px; z-index: 9999; } .screenshot-btn { background: #4CAF50; color: white; border: none; padding: 12px 24px; border-radius: 8px; cursor: pointer; font-size: 16px; margin: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }

async captureFrame(videoElement) { return new Promise((resolve) => { const canvas = document.createElement('canvas'); canvas.width = videoElement.videoWidth; canvas.height = videoElement.videoHeight; const ctx = canvas.getContext('2d'); ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height); canvas.toBlob((blob) => { resolve({ blob: blob, dataUrl: canvas.toDataURL('image/png'), width: canvas.width, height: canvas.height }); }, 'image/png'); }); } } class ElementScreenshot { // Capture specific DOM element static captureElement(element) { return new Promise((resolve, reject) => { if (!element) { reject(new Error('Element not found')); return; } html2canvas(element, { scale: 2, // Higher quality backgroundColor: null, logging: false, useCORS: true // For cross-origin images }).then(canvas => { const screenshot = { blob: null, dataUrl: canvas.toDataURL('image/png'), width: canvas.width, height: canvas.height, canvas: canvas }; canvas.toBlob((blob) => { screenshot.blob = blob; resolve(screenshot); }, 'image/png'); }).catch(reject); }); }

return ( <div className="print-screen-feature"> <div className="controls"> <button onClick={captureFullScreen} disabled={loading}> {loading ? 'Capturing...' : 'Full Screen'} </button> <button onClick={() => captureElement('capture-area')}> Capture Element </button> </div> {screenshot && ( <div className="preview"> <h3>Preview</h3> <img src={screenshot} alt="Screenshot" /> <div className="actions"> <button onClick={downloadScreenshot}>Download</button> <button onClick={copyToClipboard}>Copy to Clipboard</button> <button onClick={() => setScreenshot(null)}>Clear</button> </div> </div> )} </div> ); };

.screenshot-btn:hover { background: #45a049; transform: translateY(-2px); }

// Capture visible viewport static captureViewport() { return this.captureElement(document.body); } } class ScreenshotSaver { static saveAsFile(screenshot, filename = `screenshot_${Date.now()}.png`) { const link = document.createElement('a'); link.download = filename; link.href = screenshot.dataUrl; link.click(); } static async saveToClipboard(screenshot) { try { await navigator.clipboard.write([ new ClipboardItem({ [screenshot.blob.type]: screenshot.blob }) ]); return true; } catch (error) { console.error('Failed to copy to clipboard:', error); return false; } }