index.html
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>DOM-to-Image Screenshot Tool</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" /> </head> <body class="bg-gray-100"> <div class="container mx-auto p-8"> <h1 class="text-3xl font-bold text-center mb-6">DOM-to-Image Screenshot Tool</h1> <!-- Section to be captured --> <div id="capture-section" class="bg-white p-8 rounded-lg shadow-lg"> <h2 class="text-xl font-semibold mb-4">This section will be captured as an image!</h2> <p>This content will be converted into an image and can be downloaded by the user.</p> </div> <!-- Button to capture --> <div class="mt-6 text-center"> <button id="capture-btn" class="bg-blue-500 text-white px-4 py-2 rounded-lg">Capture Screenshot</button> </div> <!-- Screenshot preview --> <div id="preview-container" class="mt-6 text-center hidden"> <h3 class="text-xl font-semibold mb-4">Screenshot Preview</h3> <img id="screenshot-preview" alt="Screenshot Preview" class="mx-auto border border-gray-300 rounded-lg" /> <button id="download-btn" class="mt-4 bg-green-500 text-white px-4 py-2 rounded-lg">Download Image</button> </div> </div> <script> document.getElementById('capture-btn').addEventListener('click', function () { // Select the section to be captured const captureSection = document.getElementById('capture-section'); // Use dom-to-image to convert the section into an image domtoimage.toPng(captureSection) .then(function (dataUrl) { // Display the screenshot preview const previewContainer = document.getElementById('preview-container'); const previewImage = document.getElementById('screenshot-preview'); previewContainer.classList.remove('hidden'); // Set the src attribute to the data URL of the captured image previewImage.src = dataUrl; // Enable the download functionality document.getElementById('download-btn').addEventListener('click', function () { const link = document.createElement('a'); link.href = dataUrl; link.download = 'screenshot.png'; link.click(); }); }) .catch(function (error) { console.error('Error capturing the image: ', error); }); }); </script> </body> </html> |
