html2canvas

import html2canvas from 'html2canvas'; const captureAndDisplayBody = async () => { const bodyElement = document.body; try { const canvas = await html2canvas(bodyElement, { allowTaint: true, // Set to true if you are handling tainted canvases (e.g., cross-origin images without proxy) useCORS: true, // Attempt to load images using CORS logging: true // Enable logging for debugging }); // Create an image element from the canvas const img = document.createElement('img'); img.src = canvas.toDataURL('image/png'); img.alt = 'Screenshot of the page body'; img.style.maxWidth = '100%'; img.style.border = '2px solid blue'; // Append the image to the document or a specific container document.getElementById('screenshot-container')?.appendChild(img); console.log('Screenshot captured and displayed successfully!'); } catch (error) { console.error('Error capturing screenshot:', error); } }; // Example of triggering the capture (e.g., on a button click or after DOM load) document.addEventListener('DOMContentLoaded', () => { const button = document.createElement('button'); button.textContent = 'Take Screenshot of Body'; button.onclick = captureAndDisplayBody; document.body.prepend(button); const container = document.createElement('div'); container.id = 'screenshot-container'; document.body.appendChild(container); });