Tarayıcıda görüntü işleme hakkında ne biliyorsun…

Tarayıcıda görüntü işleme aşağıdaki API'ler kullanılarak mümkündür:

Canvas API: Grafikler (görüntüler dahil) programatik olarak çizmenizi sağlar. Bir resmi tuvale yükleyebilir, pikselleri manipüle edebilir (renkleri değiştirme, filtreler uygulama) ve sonucu kaydedebilirsiniz.

// Canvas'ın 2D bağlamını alın
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Bir resim oluşturun ve yükleyin
const img = new Image();
img.onload = function() {
  // Resmi tuvale çizin
  ctx.drawImage(img, 0, 0);

  // Örnek: Piksel verilerini alın
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const pixels = imageData.data; // RGBA değerleri dizisi

  // Burada pikselleri manipüle edebilirsiniz (örneğin, renkleri ters çevirme)
  for (let i = 0; i < pixels.length; i += 4) {
    pixels[i] = 255 - pixels[i];      // Kırmızı
    pixels[i + 1] = 255 - pixels[i + 1]; // Yeşil
    pixels[i + 2] = 255 - pixels[i + 2]; // Mavi
    // pixels[i + 3] - Alfa kanalı, değiştirmeyin
  }

  // Piksel verilerini tuvale güncelleyin
  ctx.putImageData(imageData, 0, 0);

  // Örnek: Tuvali Base64 formatında kaydedin
  const dataUrl = canvas.toDataURL('image/png');
  console.log(dataUrl); // PNG Base64 temsili
};
img.src = 'path/to/image.jpg';

WebGL API: GPU kullanarak 2D ve 3D grafiklerin çizimi için düşük seviyeli API. Yüksek performanslı görüntü işleme (filtreler, efektler) için shaderlar kullanılır.

// WebGL bağlamını başlatma örneği
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');

if (!gl) {
  console.error('WebGL desteklenmiyor');
}

// Burada görüntüden doku yükleme, vertex ve fragment shaderlarını tanımlama,
// doku ve shaderlar kullanılarak geometriyi çizme kodu yer almalı.
// Bu, Canvas API'ye göre çok daha karmaşık bir süreçtir.

Filtre Efektleri (CSS Filters): HTML öğelerine (görüntüler dahil) bulanıklaştırma, parlaklık, kontrast, gri tonlama gibi grafik efektleri uygulamaya olanak tanır.

/* Görüntüye bulanıklaştırma efekti uygular */
img {
  filter: blur(5px);
}

/* Gri tonlama efekti uygular */
.grayscale {
  filter: grayscale(100%);
}

SVG (Ölçeklenebilir Vektör Grafikleri): İçine gömülü raster görüntüler içerebilen vektör formatı. SVG, gömülü görüntüler de dahil olmak üzere içerik üzerinde uygulanabilen kendi filtreleri ve efektleri setine sahiptir.

<svg width="400" height="300">
  <filter id="feGaussianBlur">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
  </filter>

  <image xlink:href="path/to/image.jpg" width="400" height="300" filter="url(#feGaussianBlur)" />
</svg>

Görüntü Yakalama API'si: Cihazın kamerasından görüntü almayı sağlar. Bu doğrudan işlem olmasa da, alınan görüntüler diğer API'ler (Canvas) kullanılarak işlenebilir.
Özel kütüphaneler: JavaScript kütüphaneleri (örneğin, Fabric.js, Konva.js, PixiJS) Canvas ve WebGL ile çalışmayı kolaylaştırır, daha yüksek seviyeli soyutlamalar ve görüntü işleme fonksiyonları sağlar (kırpma, ölçeklendirme, metin ekleme, filtreler).

İşlev seçimi göreve bağlıdır: boyut değiştirme veya basit filtreler uygulama gibi temel işlemler için Canvas API genellikle yeterlidir ve kullanımı daha kolaydır. Daha karmaşık ve yüksek performanslı efektler, özellikle gerçek zamanlı olarak, WebGL tercih edilir. CSS Filtreleri ve SVG, efektleri uygulamak için deklaratif yaklaşımlar sunar.

İstemci tarafında görüntü işleme, kullanıcının cihazının performansı ve işlenecek görüntülerin boyutuyla ilgili sınırlamalara sahiptir. Kaynak yoğun işlemler için sunucu tarafı işleme daha uygundur.

Tarayıcıda görüntü işleme hakkında ne biliyorsun?