Membuat Aplikasi Crop Image menggunakan JavaScript

Membuat Aplikasi Crop Image menggunakan JavaScript

—

by

Webbiz.ID
in ,

Halo sahabat Webbiz kali ini kita akan share bagaimana membuat aplikasi Crop Image dengan menggunakan JavaScript. Pada aplikasi ini user memungkinkan mengupload gambar, melihat live preview original image, memilih ukuran gambar sesuai kebutuhan dan memungkinkan user melihat preview setelah gambar di Crop, dan yang terpenting terdapat tombol button download.

Aplikasi Crop Gambar

Aplikasi Crop Gambar

Gambar Asli
Gambar Asli
Gambar Setelah Crop
Gambar Setelah Crop

Code:

JavaScript
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <title>Aplikasi Crop Gambar</title>
    <style>
        .image-container {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }
        .image-preview {
            border: 1px solid #ccc;
            padding: 10px;
            width: 45%;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="mt-5">Aplikasi Crop Gambar</h1>
        <form id="cropForm" class="mt-3">
            <div class="form-group">
                <label for="imageInput">Pilih Gambar:</label>
                <input type="file" class="form-control-file" id="imageInput" accept="image/*" required>
            </div>
            <div class="form-group">
                <label for="widthInput">Lebar (px):</label>
                <input type="number" class="form-control" id="widthInput" required>
            </div>
            <div class="form-group">
                <label for="heightInput">Tinggi (px):</label>
                <input type="number" class="form-control" id="heightInput" required>
            </div>
            <button type="submit" class="btn btn-primary">Crop Gambar</button>
        </form>

        <div class="image-container">
            <div class="image-preview">
                <h5>Gambar Asli</h5>
                <img id="originalImage" src="" alt="Gambar Asli" style="max-width: 100%;">
            </div>
            <div class="image-preview">
                <h5>Gambar Setelah Crop</h5>
                <img id="croppedImage" src="" alt="Gambar Setelah Crop" style="max-width: 100%;">
            </div>
        </div>
        <a id="downloadLink" class="btn btn-success mt-3" style="display: none;">Download Gambar</a>
    </div>

    <script>
        const cropForm = document.getElementById('cropForm');
        const originalImage = document.getElementById('originalImage');
        const croppedImage = document.getElementById('croppedImage');
        const downloadLink = document.getElementById('downloadLink');

        cropForm.addEventListener('submit', function(event) {
            event.preventDefault();
            const file = document.getElementById('imageInput').files[0];
            const width = document.getElementById('widthInput').value;
            const height = document.getElementById('heightInput').value;

            const reader = new FileReader();
            reader.onload = function(e) {
                originalImage.src = e.target.result;
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');
                const img = new Image();
                img.onload = function() {
                    canvas.width = width;
                    canvas.height = height;
                    ctx.drawImage(img, 0, 0, width, height);
                    croppedImage.src = canvas.toDataURL();
                    downloadLink.href = canvas.toDataURL();
                    downloadLink.download = 'cropped-image.png';
                    downloadLink.style.display = 'block';
                }
                img.src = e.target.result;
            }
            reader.readAsDataURL(file);
        });
    </script>
</body>
</html>
JavaScript

Semoga code di atas bermanfaat, kalian bisa mencoba dengan code di atas, semoga bermanfaat untuk semua.

Artikel Terbaru ⭐