<section class="diZContainer diZmxAuto">
    <h2 class="diZBorderBottom">Convert Image to Base64</h2>
    <div class="diZMaxW600 diZmxAuto toolsSection diZmy20">
        <div class="diZFlexColumn ">
            <input type="file" class="image-input diZmt2" accept="image/*">
            <textarea rows="10" class="base64-textarea diZmt2" readonly></textarea>
            <p class="diZDisplayNone diZTextCenter diZmt2" id="copied-notice"></p>
            <div class="diZmt2" id="preview" ></div>
            <button class="copy-button diZmt2 diZmxAuto"><span>Copy Base64</span></button>
        </div>
    </div>
</section>


<script>
    document.querySelector('.image-input').addEventListener('change', function() {
        var file = this.files[0];
        if (file) {
            var reader = new FileReader();
            reader.onload = function(e) {
                var base64 = e.target.result;
                var img = document.createElement('img');
                img.src = base64;
                img.style.width = '100%';
                document.getElementById('preview').innerHTML = '';
                document.getElementById('preview').appendChild(img);
                document.querySelector('.base64-textarea').value = base64;
            };
            reader.readAsDataURL(file);
        }
    });

    document.querySelector('.copy-button').addEventListener('click', function() {
        var base64TextArea = document.querySelector('.base64-textarea');
        base64TextArea.select();
        document.execCommand('copy');
        document.getElementById('copied-notice').style.display = 'block';
        document.getElementById('copied-notice').innerHTML = 'Base64 copied to clipboard!';
    });
</script>
