Build a Image Compressor Web App in Browser Using Canvas API in JavaScript

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Compressor</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        .preview-image {
            max-width: 100%;
            max-height: 300px;
            margin-top: 20px;
        }
    </style>
</head>
<body class="bg-gray-100 p-6">

    <div class="max-w-lg mx-auto bg-white p-6 rounded-md shadow-md">
        <h1 class="text-2xl font-bold mb-4 text-center">Image Compressor</h1>

        <input type="file" id="image-input" accept="image/*" class="border border-gray-300 p-2 rounded w-full mb-4" required>

        <label for="quality" class="block text-gray-700 font-bold mb-1">Compression Quality (1-100):</label>
        <input type="number" id="quality" class="border border-gray-300 p-2 rounded w-full mb-4" min="1" max="100" value="80">

        <button id="compress-button" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mb-4 w-full">
            Compress Image
        </button>

        <div id="preview-container" class="hidden text-center">
            <h2 class="text-lg font-bold mb-2">Compressed Image Preview:</h2>
            <img id="compressed-image" class="preview-image" src="" alt="Compressed Image">
            <a id="download-button" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4 hidden" download>
                Download Compressed Image
            </a>
        </div>
    </div>

    <script>
        const imageInput = document.getElementById('image-input');
        const qualityInput = document.getElementById('quality');
        const compressButton = document.getElementById('compress-button');
        const compressedImage = document.getElementById('compressed-image');
        const previewContainer = document.getElementById('preview-container');
        const downloadButton = document.getElementById('download-button');

        let originalImage;

        imageInput.addEventListener('change', (event) => {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    originalImage = new Image();
                    originalImage.src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        });

        compressButton.addEventListener('click', () => {
            if (!originalImage) {
                alert('Please upload an image.');
                return;
            }

            const quality = parseInt(qualityInput.value) / 100;
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = originalImage.width;
            canvas.height = originalImage.height;
            ctx.drawImage(originalImage, 0, 0);

            canvas.toBlob((blob) => {
                const compressedImageURL = URL.createObjectURL(blob);
                compressedImage.src = compressedImageURL;

                compressedImage.onload = function() {
                    previewContainer.classList.remove('hidden');
                    downloadButton.href = compressedImageURL;
                    downloadButton.download = 'compressed_image.jpg'; // Set download attribute
                    downloadButton.classList.remove('hidden');
                };
            }, 'image/jpeg', quality);
        });
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Image Compressor</title>

<style>

.preview-image {

max-width: 100%;

max-height: 300px;

margin-top: 20px;

}

</style>

</head>

<h1 class="text-2xl font-bold mb-4 text-center">Image Compressor</h1>

<label for="quality" class="block text-gray-700 font-bold mb-1">Compression Quality (1-100):</label>

Compress Image

</button>

<h2 class="text-lg font-bold mb-2">Compressed Image Preview:</h2>

Download Compressed Image

</a>

</div>

const imageInput = document.getElementById('image-input');

const qualityInput = document.getElementById('quality');

const compressButton = document.getElementById('compress-button');

const compressedImage = document.getElementById('compressed-image');

const previewContainer = document.getElementById('preview-container');

const downloadButton = document.getElementById('download-button');

let originalImage;

imageInput.addEventListener('change', (event) => {

const file = event.target.files[0];

if (file) {

const reader = new FileReader();

reader.onload = function(e) {

originalImage = new Image();

originalImage.src = e.target.result;

};

reader.readAsDataURL(file);

}

});

compressButton.addEventListener('click', () => {

if (!originalImage) {

alert('Please upload an image.');

return;

}

const quality = parseInt(qualityInput.value) / 100;

const canvas = document.createElement('canvas');

const ctx = canvas.getContext('2d');

canvas.width = originalImage.width;

canvas.height = originalImage.height;

ctx.drawImage(originalImage, 0, 0);

canvas.toBlob((blob) => {

const compressedImageURL = URL.createObjectURL(blob);

compressedImage.src = compressedImageURL;

compressedImage.onload = function() {

previewContainer.classList.remove('hidden');

downloadButton.href = compressedImageURL;

downloadButton.download = 'compressed_image.jpg'; // Set download attribute

downloadButton.classList.remove('hidden');

};

}, 'image/jpeg', quality);

});

</script>

</body>

</html>

Build a Image Compressor Web App in Browser Using Canvas API in JavaScript

Comments

Leave a Reply Cancel reply

Archives