<section class="diZContainer diZmxAuto ">
    <h1 class="diZBorderBottom">Image Compression Tool</h1>
    <div class="toolsSection diZMaxW600 diZmxAuto diZmy20">
        <div>
            <input type="file" id="imageInput" accept="image/*">
        </div>
        <div>
            <label for="qualityInput">Compression Quality:</label>
            <div class="diZFlexRow">
                <input class="diZw100" type="range" id="qualityInput" min="1" max="100" step="1" value="10" />&nbsp;
                <span id="qualityValue">10%</span>
            </div>
        </div>
        <div class="image-preview">
            <img id="preview" src="" alt="" style="width: 100%;" />
            <span id="imageSize" class="image-size"></span>
        </div>
        <div class="diZFlexBetween">
            <button class="comp-button" onclick="compressImage()"><span>Compress Image</span></button>
            <a class="diZDisplayNone diZButtonDefault" id="downloadLink" href="#" download="compressed_image.jpg"><span>Download Compressed Image</span></a>
        </div>
    </div>
</section>

<script>
function compressImage() {
    const fileInput = document.getElementById('imageInput');
    const file = fileInput.files[0];

    if (!file) {
        alert('Please select an image file.');
        return;
    }

    const reader = new FileReader();

    reader.onload = function(event) {
        const image = new Image();
        image.src = event.target.result;

        image.onload = function() {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');

            canvas.width = image.width;
            canvas.height = image.height;
            console.log(image.width)
            ctx.drawImage(image, 0, 0);

            const qualityInput = document.getElementById('qualityInput');
            const qualityValue = parseFloat(qualityInput.value) / 100; // Normalize quality value to range 0-1

            canvas.toBlob(function(blob) {
                const url = URL.createObjectURL(blob);
                const preview = document.getElementById('preview');
                const downloadLink = document.getElementById('downloadLink');

                preview.src = url;
                downloadLink.href = url;
                downloadLink.style.display = 'flex';

                const imageSizeSpan = document.getElementById('imageSize');
                const compressedSize = (blob.size / 1024).toFixed(2); // Convert bytes to kilobytes and round to 2 decimal places
                imageSizeSpan.textContent = `Compressed Image Size: ${compressedSize} KB`;
            }, 'image/jpeg', qualityValue); // Pass normalized quality value to toBlob
        };
    };

    reader.readAsDataURL(file);
}

document.getElementById('qualityInput').addEventListener('input', function() {
    document.getElementById('qualityValue').textContent = this.value + "%";
});
</script>