Membuat Aplikasi Filter Sepia dengan JavaScript

Membuat Aplikasi Filter Sepia dengan JavaScript

—

by

Webbiz.ID
in ,

Berikut adalah contoh kode untuk membuat aplikasi Filter Sepia 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 untuk tampilan yang lebih menarik.

Aplikasi Filter Sepia

Aplikasi Filter Sepia

Image Preview
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 Sepia</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <style>
    .sepia-filter {
      filter: sepia(100%);
    }
  </style>
</head>
<body>
  <div class="container mt-5">
    <h1>Aplikasi Filter Sepia</h1>
    <div class="form-group">
      <label for="sepia-range">Presentase Sepia:</label>
      <input type="range" class="form-control-range" id="sepia-range" min="0" max="100" step="1" value="0">
    </div>
    <div class="form-group">
      <label for="image-preview">Preview:</label>
      <img id="image-preview" src="path/to/your/image.jpg" alt="Image Preview" class="img-fluid">
    </div>
    <div class="form-group">
      <label for="code-output">Code Output:</label>
      <textarea id="code-output" class="form-control" rows="5" readonly></textarea>
    </div>
  </div>
</body>
</html>
HTML

JavaScript

JavaScript

    const sepiaRange = document.getElementById('sepia-range');
    const imagePreview = document.getElementById('image-preview');
    const codeOutput = document.getElementById('code-output');

    sepiaRange.addEventListener('input', () => {
      const sepiaValue = sepiaRange.value;
      imagePreview.style.filter = `sepia(${sepiaValue}%)`;
      codeOutput.value = `filter: sepia(${sepiaValue}%);`;
    });
JavaScript

Anda dapat mengganti path/to/your/image.jpg dengan path gambar yang ingin Anda gunakan sebagai preview. Aplikasi ini menggunakan elemen <input type="range"> untuk mengatur presentase filter sepia, dan akan mengubah tampilan gambar secara langsung saat pengguna menggeser slider. Code output yang dihasilkan akan ditampilkan di textarea yang bisa langsung disalin oleh pengguna.

Silakan implementasikan kode di atas ke dalam file HTML Anda dan sesuaikan dengan kebutuhan Anda. Semoga bermanfaat!

Artikel Terbaru ⭐