Cara Mengubah Warna Gambar Dengan Kanvas HTML5 Dalam JavaScript

Menggunakan Vanilla JS biasa untuk mengedit gambar dalam browser.

Peramban web adalah aplikasi independen platform universal untuk beragam alat JavaScript. Menggunakan kanvas HTML5 dan JavaScript sisi klien, mengubah warna gambar dapat dilakukan dengan mudah.

Contoh Klasik —(1) Inversi Warna & (2) Gambar Skala Abu-Abu

Kedua implementasi tersebut didasarkan pada model warna RGB yang digunakan untuk merender gambar browser.

(1) Inversi Warna

/* HTML5 canvas element has attribute `id` = 'canvasDemo' */
const _canvas = document.getElementById('canvasDemo');
let w = _canvas.width;
let h = _canvas.height;

const imgData = _canvas.getContext('2d').getImageData(0, 0, w, h);

// Code logic: Apply required values for RGB components
for (let i = 0; i < imgData.data.length; i += 4) {
  /* START */
  let red = imgData.data[i];
  let green = imgData.data[i + 1];
  let blue = imgData.data[i + 2];
  let alpha = 255;
  
  imgData.data[i] = 255 - red;
  imgData.data[i + 1] = 255 - green;
  imgData.data[i + 2] = 255 - blue;
  imgData.data[i + 3] = 255;
  /* END */
}

Logika kode antara /* START */ dan /* END */:

imgData.data[i + 3] = 255;: Mengacu pada opasitas gambar (ditetapkan ke nilai konstan)
Kurangi setiap nilai komponen RGB dari 255 untuk mendapatkan nilai warna terbalik

(2) Skala abu-abu

Untuk mendapatkan efek gambar skala abu-abu, ketiga komponen — Merah (R), Hijau (G) dan Biru (B) harus memiliki nilai yang sama.

/* HTML5 canvas element has attribute `id` = 'canvasDemo' */
const _canvas = document.getElementById('canvasDemo');
let w = _canvas.width;
let h = _canvas.height;

const imgData = _canvas.getContext('2d').getImageData(0, 0, w, h);

// Code logic: Apply required values for RGB components
for (let i = 0; i < imgData.data.length; i += 4) {
  /* START */
  let red = imgData.data[i];
  let green = imgData.data[i + 1];
  let blue = imgData.data[i + 2];
  let alpha = imgData.data[i + 3];

  let gray = (red + green + blue) / 3;
      
  imgData.data[i] = gray;
  imgData.data[i + 1] = gray;
  imgData.data[i + 2] = gray;
  imgData.data[i + 3] = alpha;
  /* END */
}

Logika kode antara /* START */ dan /* END */:

let gray = (red + green + blue) / 3: Untuk mendapatkan dan mengatur nilai yang diperlukan untuk setiap komponen RGB

Demo (Silakan mencobanya sendiri di image-rgb-change)

Catatan: Kode sumber lengkap dapat ditemukan di repo GitHub saya. Jangan ragu untuk ⭐ atau 🔱! Demo di image-rgb-change.

Dan itu dia! Terima kasih banyak telah bertahan hingga akhir artikel ini! ❤ Semoga artikel ini bermanfaat bagi Anda dan jangan ragu untuk ikuti saya di Medium jika Anda menginginkan lebih banyak konten terkait Sistem Informasi Geografis (GIS), Analisis Data & aplikasi Web. Akan sangat menghargainya — 😀

— 🌮 Tolong belikan aku Taco ξ(🎀˶❛◡❛)

Bergabunglah dengan Medium dengan tautan rujukan saya - Charmaine Chui
Dapatkan akses penuh ke setiap postingan Charmaine Chui dan rekan penulis lainnya di Medium! 😃 Biaya keanggotaan Anda langsung…geek-cc.medium.com