Advanced Image Converter

Advanced Image Converter

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

<div class="container">   
<input accept="image/*" id="upload" type="file" />      
<div class="preview-container" id="imagePreviewContainer">
<img alt="Image Preview" id="imagePreview" src="" />
        </div>
        <div>
            <label>Select Output Format: </label>
            <select id="outputFormat">
                <option value="image/png">PNG</option>
                <option value="image/jpeg">JPEG</option>
                <option value="image/webp">WebP</option>
                <option value="image/gif">GIF</option>
            </select>
        </div>
        <button id="convertBtn">Convert Image</button>
        <button id="clearBtn">Clear</button>
        <div id="fileInfo">
            <p id="fileSize">File Size: N/A</p>
        </div>
        <div id="progressBarContainer">
            <progress id="progressBar" max="100" value="0"></progress>
        </div>
        <div id="downloadLinkContainer"></div>
    </div>
<style>
box {
    font-family: Arial, sans-serif;
    background-color: #fafafa;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    background-color: #fff;
    padding: 3px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

h1 {
    font-size: 24px;
    color: #333;
}

#imagePreviewContainer {
    margin-top: 20px;
}

#imagePreview {
    margin:1px;
    width: 100%;
    height: 0 auto;
    display: none;
    border-radius: 8px;
    border: 2px solid #ddd;
}

input[type="file"] {
    margin-top: 20px;
    color:#333;
    border:1px solid #333;
    max-width:100%;
    padding:8px;
    border-radius: 12px;
}
label {
  color:#333;
}
select {
    margin: 10px 0;
    padding: 8px;
    font-size: 14px;
    color:#333;
}

button {
    padding: 12px 20px;
    margin: 10px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button#convertBtn {
    background-color: #4CAF50;
    color: white;
}

button#convertBtn:hover {
    background-color: #45a049;
}

button#clearBtn {
    background-color: #f44336;
    color: white;
}

button#clearBtn:hover {
    background-color: #e53935;
}

#fileInfo {
    font-size: 14px;
    color: #555;
    margin-top: 10px;
}

#progressBarContainer {
    margin-top: 20px;
    display: none;
}

#downloadLinkContainer {
    margin-top: 20px;
}

#downloadLinkContainer a {
    display: inline-block;
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    margin-top: 10px;
}

#downloadLinkContainer a:hover {
    background-color: #0056b3;
}
</style>
<script>
 document.getElementById('upload').addEventListener('change', handleImageUpload);
document.getElementById('convertBtn').addEventListener('click', convertImage);
document.getElementById('clearBtn').addEventListener('click', clearFields);

let uploadedImage = null;
let imageFormat = 'image/png';

function handleImageUpload(event) {
    const file = event.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const img = document.getElementById('imagePreview');
            img.src = e.target.result;
            img.style.display = 'block';
            uploadedImage = new Image();
            uploadedImage.src = e.target.result;

            // Display the file size
            const fileSize = (file.size / 1024).toFixed(2); // Convert to KB
            document.getElementById('fileSize').textContent = `File Size: ${fileSize} KB`;
        };
        reader.readAsDataURL(file);
    }
}

function convertImage() {
    if (!uploadedImage) {
        alert('Please upload an image first');
        return;
    }

    const outputFormat = document.getElementById('outputFormat').value;
    imageFormat = outputFormat; // Set the output format from dropdown

    // Show progress bar
    document.getElementById('progressBarContainer').style.display = 'block';

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = uploadedImage.width;
    canvas.height = uploadedImage.height;

    ctx.drawImage(uploadedImage, 0, 0);

    // Simulate progress
    let progress = 0;
    const progressBar = document.getElementById('progressBar');
    const progressInterval = setInterval(function() {
        if (progress < 100) {
            progress += 10;
            progressBar.value = progress;
        } else {
            clearInterval(progressInterval);
            generateDownloadLink(canvas);
        }
    }, 300);
}

function generateDownloadLink(canvas) {
    canvas.toBlob(function(blob) {
        const downloadLink = document.createElement('a');
        const url = URL.createObjectURL(blob);
        downloadLink.href = url;
        downloadLink.download = `converted-image.${imageFormat.split('/')[1]}`;
        downloadLink.textContent = 'Download Converted Image';
        document.getElementById('downloadLinkContainer').innerHTML = '';
        document.getElementById('downloadLinkContainer').appendChild(downloadLink);
    }, imageFormat);
}

function clearFields() {
    document.getElementById('upload').value = '';
    document.getElementById('imagePreview').style.display = 'none';
    document.getElementById('fileSize').textContent = 'File Size: N/A';
    document.getElementById('outputFormat').value = 'image/png';
    document.getElementById('downloadLinkContainer').innerHTML = '';
    document.getElementById('progressBarContainer').style.display = 'none';
    uploadedImage = null;
}
</script>