Build a Image & Webp Converter 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 Converter</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 Converter</h1>

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

        <div class="mb-4">
            <label for="target-format" class="block text-gray-700 font-bold mb-1">Convert to Format:</label>
            <select id="target-format" class="border border-gray-300 p-2 rounded w-full">
                <option value="image/jpeg">JPEG</option>
                <option value="image/png">PNG</option>
                <option value="image/webp">WEBP</option>
                <option value="image/gif">GIF</option>
                <option value="image/bmp">BMP</option>
                <option value="image/tiff">TIFF</option>
            </select>
        </div>

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

        <div id="preview-container" class="hidden text-center">
            <h2 class="text-lg font-bold mb-2">Converted Image Preview:</h2>
            <img id="converted-image" class="preview-image" src="" alt="Converted 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 Converted Image
            </a>
        </div>
    </div>

    <script>
        const imageInput = document.getElementById('image-input');
        const targetFormatSelect = document.getElementById('target-format');
        const convertButton = document.getElementById('convert-button');
        const convertedImage = document.getElementById('converted-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);
            }
        });

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

            const targetFormat = targetFormatSelect.value;
            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 convertedImageURL = URL.createObjectURL(blob);
                convertedImage.src = convertedImageURL;

                convertedImage.onload = function() {
                    previewContainer.classList.remove('hidden');
                    downloadButton.href = convertedImageURL;
                    downloadButton.download = `converted_image.${targetFormat.split('/')[1]}`; // Set download attribute
                    downloadButton.classList.remove('hidden');
                };
            }, targetFormat);
        });
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Image Converter</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 Converter</h1>

<label for="target-format" class="block text-gray-700 font-bold mb-1">Convert to Format:</label>

</select>

</div>

Convert Image

</button>

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

Download Converted Image

</a>

</div>

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

const targetFormatSelect = document.getElementById('target-format');

const convertButton = document.getElementById('convert-button');

const convertedImage = document.getElementById('converted-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);

}

});

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

if (!originalImage) {

alert('Please upload an image.');

return;

}

const targetFormat = targetFormatSelect.value;

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 convertedImageURL = URL.createObjectURL(blob);

convertedImage.src = convertedImageURL;

convertedImage.onload = function() {

previewContainer.classList.remove('hidden');

downloadButton.href = convertedImageURL;

downloadButton.download = `converted_image.${targetFormat.split('/')[1]}`; // Set download attribute

downloadButton.classList.remove('hidden');

};

}, targetFormat);

});

</script>

</body>

</html>

Build a Image & Webp Converter in Browser Using Canvas API in Javascript

Comments

Leave a Reply Cancel reply

Archives