Create Image Resize App using Tailwind CSS

Last Updated : 07 Mar, 2024

Image Resizer is an application that is used to resize an uploaded image by providing new dimensions in the form of width and height. This application contains two numbered input fields to get the number input for width and height from the user. It also contains a file input field to upload an image file. It allows you to download the resized image as well.

Approach:

First, we make a folder where we put an HTML file and a JavaScript file. In the HTML file, we include a link to integrate Tailwind CSS.
Now use Tailwind CSS classes to style the Image Resize app. We add input fields to set the width and height and also the one button through which we can see the preview of the image.
In the JavaScript file, we write the logic. like the width which is set by user same implemented on the image and also the download button to download the image in one click.

Example: The below code example will help you in creating a image resizer app using Tailwind CSS.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
    <title>Image Resizer</title>
</head>
 
<body class="bg-gray-100 p-8">
    <div class="max-w-md mx-auto bg-white 
        p-8 rounded shadow-md">
        <h2 class="text-2xl font-bold mb-4">
            Image Resizer
        </h2>
 
        <form id="resizeForm">
            <div class="mb-4">
                <label for="width" class=
                    "block text-sm font-medium 
                    text-gray-600">
                    Width (in pixels)
                </label>
                <input type="number" id="width" name="width"
                    class="mt-1 p-2 w-full border rounded">
            </div>
 
            <div class="mb-4">
                <label for="height" class="block text-sm font-medium 
                    text-gray-600">
                    Height (in pixels)
                </label>
                <input type="number" id="height" name="height"
                    class="mt-1 p-2 w-full border rounded">
            </div>
 
            <div class="mb-4">
                <label for="image" class="block text-sm 
                    font-medium text-gray-600">
                    Upload Image
                </label>
                <input type="file" id="image" name="image"
                    accept=".jpg, .jpeg, .png, .TIFF, .RAW"
                    class="mt-1" onchange="displayImage()">
            </div>
 
            <button type="button" onclick="resizeImage()"
                class="bg-blue-500 text-white p-2 rounded">
                Resize Image
            </button>
        </form>
 
        <div class="mt-8" id="previewContainer"
            style="display:none;">
            <h3 class="text-lg font-semibold mb-2">
                Preview
            </h3>
            <img id="previewImage" alt="Resized Image"
                class="max-w-full">
 
            <div class="mt-4">
                <a id="downloadLink" download="resized_image.jpg"
                    style="display:none;"
                    class="bg-green-500 text-white p-2 rounded"
                    href="#">
                    Download Resized Image
                </a>
            </div>
        </div>
    </div>
 
    <script src="./script.js"></script>
</body>
 
</html>

Javascript

//script.js
 
function displayImage() {
    const fileInput = 
        document.getElementById('image');
    const previewContainer = 
        document.getElementById('previewContainer');
    const previewImage = 
        document.getElementById('previewImage');
 
    const reader = new FileReader();
    reader.onload = function (e) {
        previewImage.src = e.target.result;
        previewContainer.style.display = 'block';
    };
 
    reader.readAsDataURL(fileInput.files[0]);
}
 
function resizeImage() {
    const width = 
        document.getElementById('width').value;
    const height = 
        document.getElementById('height').value;
    const fileInput = 
        document.getElementById('image');
    const downloadLink = 
        document.getElementById('downloadLink');
 
    if (!width || !height || !fileInput.files[0]) {
        alert('Please fill in all the fields and upload an image.');
        return;
    }
 
    const reader = new FileReader();
    reader.onload = function (e) {
        const img = new Image();
        img.src = e.target.result;
 
        img.onload = function () {
            const canvas = 
                document.createElement('canvas');
            canvas.width = width;
            canvas.height = height;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, width, height);
 
            const previewImage = 
                document.getElementById('previewImage');
            previewImage.src = 
                canvas.toDataURL('image/jpeg');
 
            downloadLink.href = 
                canvas.toDataURL('image/jpeg');
            downloadLink.style.display = 
                'inline-block';
        };
    };
    reader.readAsDataURL(fileInput.files[0]);
}