Image to Base64 Converter

Image to Base64 Converter

1. မိမိ blog site ကို account အရင်ဝင်ပါ
2. dashboard ထဲက Pages(or)Posts ကိုနှိပ်
3. + အိုင်ကွန်ကိုနှိပ်
4. 🖍️ အိုင်ကွန်ကိုနှိပ်၍ < > HTML view ကိုရွေးချယ်၍နှိပ်ပါ
5. အောက်က code ကို copy ယူပြီးကူးထည့်ပေးပါ
6. save ကိုနှိပ်ပြီးပါပြီ

<style>
box {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f9;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.container {
   text-align: center;
   background-color: white;
   padding: 3px;
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   width: 100%;
   max-width: 100%;
        }
h1 {
   font-size: 24px;
   margin-bottom: 5px;
}
input[type="file"] {
   width:85%;
   padding: 3px;
   margin-bottom: 10px;
   background-color: #000000;
   border: 1px solid #ddd;
   border-radius: 5px;
   cursor: pointer;
}
textarea {
    width: 85%;
    height: 150px;
    padding: 3px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-top: 20px;
    font-family: monospace;
    background-color: #f9f9f9;
    resize: none;
}
button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 20px;
}
button:hover {
    background-color: #45a049;
}
.copy-btn {
    background-color: #007bff;
    margin-top: 10px;
}
.copy-btn:hover {
    background-color: #0056b3;
}
.message {
    color: green;
    font-size: 14px;
    margin-top: 5px;
    display: none;
}
</style>


    <div class="container">
        
        <input accept="image/*" id="fileInput" type="file" />
        <button onclick="convertToBase64()">Convert to Base64</button>
        <textarea id="base64Output" readonly=""></textarea>
        <button class="copy-btn" onclick="copyToClipboard()">Copy to Clipboard</button>
        <p class="message" id="copyMessage">Base64 string copied to clipboard!</p>
    </div>

    <script>
        function convertToBase64() {
            const fileInput = document.getElementById("fileInput");
            const output = document.getElementById("base64Output");

            if (fileInput.files.length === 0) {
                alert("Please select an image file first.");
                return;
            }

            const file = fileInput.files[0];
            const reader = new FileReader();

            reader.onload = function(event) {
                output.value = event.target.result;
            };

            reader.onerror = function(error) {
                alert("Error reading file: " + error);
            };

            // Read the image file as a data URL (Base64)
            reader.readAsDataURL(file);
        }

        function copyToClipboard() {
            const base64Output = document.getElementById("base64Output");

            if (base64Output.value === "") {
                alert("No Base64 data to copy. Please convert an image first.");
                return;
            }

            // Copy Base64 string to clipboard
            navigator.clipboard.writeText(base64Output.value).then(function() {
                // Show success message
                const message = document.getElementById("copyMessage");
                message.style.display = "block";
                setTimeout(function() {
                    message.style.display = "none";
                }, 2000);
            }, function(err) {
                alert("Failed to copy: " + err);
            });
        }
    </script>