Build a Image Resizer 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 Resizer</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: 500px;
            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 Resizer</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="width" class="block text-gray-700 font-bold mb-1">Width (px):</label>
            <input type="number" id="width" class="border border-gray-300 p-2 rounded w-full" placeholder="Enter width">
        </div>

        <div class="mb-4">
            <label for="height" class="block text-gray-700 font-bold mb-1">Height (px):</label>
            <input type="number" id="height" class="border border-gray-300 p-2 rounded w-full" placeholder="Enter height">
        </div>

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

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

    <script>
        const imageInput = document.getElementById('image-input');
        const widthInput = document.getElementById('width');
        const heightInput = document.getElementById('height');
        const resizeButton = document.getElementById('resize-button');
        const resizedImage = document.getElementById('resized-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;
                    originalImage.onload = function() {
                        widthInput.value = originalImage.width; // Set default width
                        heightInput.value = originalImage.height; // Set default height
                    }
                };
                reader.readAsDataURL(file);
            }
        });

        resizeButton.addEventListener('click', () => {
            const newWidth = parseInt(widthInput.value);
            const newHeight = parseInt(heightInput.value);

            if (!originalImage || isNaN(newWidth) || isNaN(newHeight)) {
                alert('Please upload an image and enter valid dimensions.');
                return;
            }

            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = newWidth;
            canvas.height = newHeight;
            ctx.drawImage(originalImage, 0, 0, newWidth, newHeight);

            const resizedImageURL = canvas.toDataURL('image/png');
            resizedImage.src = resizedImageURL;

            resizedImage.onload = function() {
                previewContainer.classList.remove('hidden');
                downloadButton.href = resizedImageURL;
                downloadButton.classList.remove('hidden');
            };
        });
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Image Resizer</title>

<style>

.preview-image {

max-width: 100%;

max-height: 500px;

margin-top: 20px;

}

</style>

</head>

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

<label for="width" class="block text-gray-700 font-bold mb-1">Width (px):</label>

</div>

<label for="height" class="block text-gray-700 font-bold mb-1">Height (px):</label>

</div>

Resize Image

</button>

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

Download Resized Image

</a>

</div>

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

const widthInput = document.getElementById('width');

const heightInput = document.getElementById('height');

const resizeButton = document.getElementById('resize-button');

const resizedImage = document.getElementById('resized-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;

originalImage.onload = function() {

widthInput.value = originalImage.width; // Set default width

heightInput.value = originalImage.height; // Set default height

}

};

reader.readAsDataURL(file);

}

});

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

const newWidth = parseInt(widthInput.value);

const newHeight = parseInt(heightInput.value);

if (!originalImage || isNaN(newWidth) || isNaN(newHeight)) {

alert('Please upload an image and enter valid dimensions.');

return;

}

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

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

canvas.width = newWidth;

canvas.height = newHeight;

ctx.drawImage(originalImage, 0, 0, newWidth, newHeight);

const resizedImageURL = canvas.toDataURL('image/png');

resizedImage.src = resizedImageURL;

resizedImage.onload = function() {

previewContainer.classList.remove('hidden');

downloadButton.href = resizedImageURL;

downloadButton.classList.remove('hidden');

};

});

</script>

</body>

</html>

Build a Image Resizer Web App in Browser Using Canvas API in Javascript

Comments

Leave a Reply Cancel reply

Archives