Membuat Aplikasi Filter Hue-Rotate dengan JavaScript

Membuat Aplikasi Filter Hue-Rotate dengan JavaScript

—

by

Webbiz.ID
in ,

Berikut adalah contoh kode untuk membuat aplikasi Filter Hue-Rotate dengan menggunakan JavaScript. Aplikasi ini akan menghasilkan live preview presentase dan code output yang bisa langsung disalin oleh pengguna. User interface aplikasi ini menggunakan Bootstrap. Berikut adalah implementasinya dalam HTML:

Aplikasi Filter Hue-Rotate

Aplikasi Filter Hue-Rotate

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Aplikasi Filter Hue-Rotate</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <style>
    .image-container {
      width: 300px;
      height: 300px;
      background-image: url('path/to/your/image.jpg');
      background-size: cover;
      background-position: center;
      filter: hue-rotate(0deg);
    }
  </style>
</head>
<body>
  <div class="container mt-5">
    <h1 class="text-center">Aplikasi Filter Hue-Rotate</h1>
    <div class="row justify-content-center">
      <div class="col-md-6">
        <div class="form-group">
          <label for="hue-rotate-range">Presentase Hue-Rotate:</label>
          <input type="range" class="form-control-range" id="hue-rotate-range" min="0" max="360" step="1" value="0">
        </div>
      </div>
    </div>
    <div class="row justify-content-center">
      <div class="col-md-6">
        <div class="image-container"></div>
      </div>
    </div>
    <div class="row justify-content-center">
      <div class="col-md-6">
        <div class="form-group">
          <label for="code-output">Code Output:</label>
          <textarea class="form-control" id="code-output" rows="3" readonly></textarea>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
HTML

JavaScript

JavaScript
  <script>
    const rangeInput = document.getElementById('hue-rotate-range');
    const imageContainer = document.querySelector('.image-container');
    const codeOutput = document.getElementById('code-output');

    rangeInput.addEventListener('input', function() {
      const hueRotateValue = this.value;
      imageContainer.style.filter = `hue-rotate(${hueRotateValue}deg)`;
      codeOutput.value = `filter: hue-rotate(${hueRotateValue}deg);`;
    });
  </script>
JavaScript

Anda dapat mengganti path/to/your/image.jpg dengan path gambar yang ingin Anda gunakan. Aplikasi ini menggunakan elemen input dengan tipe range untuk mengatur presentase Hue-Rotate. Ketika nilai presentase berubah, gambar pada image-container akan berubah sesuai dengan nilai presentase yang dipilih. Code output juga akan diperbarui secara otomatis.

Silakan salin kode di atas ke dalam file HTML Anda dan sesuaikan dengan kebutuhan Anda. Anda juga dapat menyesuaikan tampilan aplikasi menggunakan CSS dan Bootstrap sesuai keinginan Anda.

Semoga contoh kode di atas bermanfaat bagi Anda dalam membuat aplikasi Filter Hue-Rotate menggunakan JavaScript.

Artikel Terbaru ⭐