
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag and Drop Image to Base64</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 20px;
        }
        #drop-area {
            width: 300px;
            height: 300px;
            border: 2px dashed #ccc;
            margin: 20px auto;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #888;
            cursor: pointer;
        }
        #result {
            margin-top: 20px;
            white-space: pre-wrap;
            font-family: monospace;
            word-wrap: break-word;
            max-height: 300px;
            overflow-y: scroll;
        }
        #output-image {
            margin-top: 20px;
            max-width: 100%;
            max-height: 200px;
            display: block;
            margin: 20px auto;
        }
        #file-input {
            display: none;
        }
        #copy-button {
            margin-top: 20px;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
            font-size: 16px;
        }
        #copy-button:disabled {
            background-color: #ccc;
        }
    </style>
</head>
<body>

    <h1>Drag and Drop Image to Base64 Converter</h1>
    <div id="drop-area">
        Drop an image here or click to select a file
    </div>

    <input type="file" id="file-input" accept="image/*">

    <canvas id="canvas" style="display:none;"></canvas>

    <div id="result"></div>
    <button id="copy-button" disabled>Copy Base64 String</button>
    <img id="output-image" src="" alt="Uploaded Image">

    <script>
        const dropArea = document.getElementById('drop-area');
        const resultDiv = document.getElementById('result');
        const outputImage = document.getElementById('output-image');
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const fileInput = document.getElementById('file-input');
        const copyButton = document.getElementById('copy-button');

        // Dragover event to prevent default behavior
        dropArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            dropArea.textContent = 'Release to Upload';
        });

        // Dragleave event
        dropArea.addEventListener('dragleave', () => {
            dropArea.textContent = 'Drop an image here or click to select a file';
        });

        // Drop event to handle the image drop
        dropArea.addEventListener('drop', (e) => {
            e.preventDefault();
            dropArea.textContent = 'Processing Image...';
            handleFile(e.dataTransfer.files[0]);
        });

        // Click event to trigger file selection
        dropArea.addEventListener('click', () => {
            fileInput.click();
        });

        // Handle file input change
        fileInput.addEventListener('change', () => {
            const file = fileInput.files[0];
            if (file) {
                dropArea.textContent = 'Processing Image...';
                handleFile(file);
            }
        });

        // Function to handle the file (either dropped or selected)
        function handleFile(file) {
            if (file && file.type.startsWith('image/')) {
                const reader = new FileReader();

                reader.onload = (event) => {
                    const img = new Image();
                    img.onload = () => {
                        // Set canvas size to image size
                        canvas.width = img.width;
                        canvas.height = img.height;
                        ctx.drawImage(img, 0, 0);

                        // Display the image below the drop area
                        outputImage.src = img.src;

                        // Extract base64 image data
                        const base64Data = canvas.toDataURL();
                        resultDiv.textContent = base64Data;
                        copyButton.disabled = false; // Enable the copy button
                    };
                    img.src = event.target.result;
                };
                reader.readAsDataURL(file);
            } else {
                resultDiv.textContent = 'Please drop a valid image file.';
            }
        }

        // Copy the Base64 string to clipboard
        copyButton.addEventListener('click', () => {
            const base64Text = resultDiv.textContent;
            if (base64Text) {
                navigator.clipboard.writeText(base64Text)
                    .then(() => {
                        alert('Base64 string copied to clipboard!');
                    })
                    .catch(err => {
                        alert('Failed to copy: ' + err);
                    });
            }
        });
    </script>

</body>
</html>