Image Crop Tool Card using Tailwind CSS & JavaScript

Last Updated : 07 Mar, 2024

The Image Crop Tool is a web application designed to allow users to upload an image crop it to their desired dimensions and download the cropped image. It provides a user-friendly interface for selecting an image file adjusting the crop size and performing the cropping operation.

Approach to create Image Crop Tool Card :

Begin with a basic HTML structure, including the <!DOCTYPE html> declaration, <html>, <head>, and <body> tags. Import external resources like Tailwind CSS and Cropper.js for styling and image cropping functionality.
Create a container div with Tailwind CSS classes for styling. Inside the container, include an input element of type “file” for selecting an image file.
Add a div for displaying the image preview and input range for adjusting the crop size. Include buttons for cropping, downloading, and clearing the image.
Use JavaScript to handle file input changes, image preview, and cropping functionality. Initialize the Cropper.js library on the selected image and define event listeners for the crop, download, and clear buttons.
Apply custom CSS styles for the container, labels, and buttons to enhance the appearance and usability of the image crop tool. Use Tailwind CSS utility classes for quick and responsive styling

Example: Implementation to design a image crop tool 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">
    <title>The Image Crop Tool</title>
    <link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
          rel="stylesheet">
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css"
          rel="stylesheet">
    <style>
        .container {
            font-size: 1.5rem;
            width: 80%;
            max-width: 800px;
        }
 
        .label {
            font-size: 1.3rem;
        }
    </style>
</head>
 
<body class="bg-gray-100 min-h-screen flex 
             flex-col justify-center items-center">
    <div class="container max-w-md w-full p-8 bg-white 
                rounded-lg shadow-lg border-2 border-green-400">
        <h1 class="text-3xl font-semibold text-center mb-8">
              Image Crop Tool
          </h1>
        <div class="mb-4">
            <label for="file-input" class="block text-sm label text-gray-700">
                  Select Image:
              </label>
            <input type="file" id="file-input"
                   class="w-full border border-gray-300 rounded-md 
                          mt-3 py-2 px-3 focus:outline-none 
                          focus:border-blue-500">
        </div>
        <div class="mb-4">
            <label for="preview" class="block text-sm label text-gray-700">
                  Preview:
              </label>
            <div id="preview" class="border border-gray-300 
                                     rounded-md overflow-hidden mt-3"
                 style="width: 700px; height: 300px;">
              </div>
        </div>
        <div class="mb-4">
            <label for="crop-size" class="block text-sm label text-gray-700">
                  Crop Size:
              </label>
            <input type="range" id="crop-size" class="w-full"
                   min="50" max="300" value="200">
        </div>
        <div class="flex items-center justify-between mb-4">
            <button id="crop-btn"
                class="px-6 py-3 bg-blue-500 text-white rounded-md 
                       hover:bg-blue-600 focus:outline-none">Crop Image
              </button>
            <button id="download-btn"
                    class="px-6 py-3 bg-green-500 text-white rounded-md 
                           hover:bg-green-600 focus:outline-none">
                  Download
              </button>
            <button id="clear-btn"
                    class="px-6 py-3 bg-red-500 text-white rounded-md 
                              hover:bg-red-600 focus:outline-none">
                  Clear
              </button>
        </div>
    </div>
    <script>
        const fileInput = document.getElementById('file-input');
        const preview = document.getElementById('preview');
        const cropSizeInput = document.getElementById('crop-size');
        const cropBtn = document.getElementById('crop-btn');
        const downloadBtn = document.getElementById('download-btn');
        const clearBtn = document.getElementById('clear-btn');
        let cropper = null;
        fileInput.addEventListener('change', (e) => {
            const file = e.target.files[0];
            const reader = new FileReader();
            reader.onload = (event) => {
                if (cropper) {
                    cropper.destroy();
                }
                preview.innerHTML = '';
                const img = document.createElement('img');
                img.src = event.target.result;
                img.id = 'image';
                img.style.maxWidth = '100%';
                preview.appendChild(img);
                cropper = new Cropper(img, {
                    aspectRatio: 1,
                    crop(event) {
                    }
                });
            };
            reader.readAsDataURL(file);
        });
        cropBtn.addEventListener('click', () => {
            if (cropper) {
                const canvas = cropper.getCroppedCanvas({
                    width: cropSizeInput.value,
                    height: cropSizeInput.value,
                });
                const croppedImage = document.createElement('img');
                croppedImage.src = canvas.toDataURL();
                preview.innerHTML = '';
                preview.appendChild(croppedImage);
            }
        });
        downloadBtn.addEventListener('click', () => {
            if (cropper) {
                cropper.getCroppedCanvas().toBlob((blob) => {
                    const url = URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = 'cropped-image.png';
                    document.body.appendChild(a);
                    a.click();
                    URL.revokeObjectURL(url);
                });
            }
        });
        clearBtn.addEventListener('click', () => {
            if (cropper) {
                cropper.destroy();
            }
            preview.innerHTML = '';
            fileInput.value = '';
        });
    </script>
</body>
 
</html>