OpenCV.js’e Başlangıç

Bilgisayar görüşü (Computer Vision), makinelerin dijital görüntü ve videolardan anlamlı bilgiler çıkararak dünyayı “görmesini” ve yorumlamasını sağlayan bir yapay zeka alanıdır. Günümüzde otonom araçlardan yüz tanımaya, tıbbi görüntülemeden artırılmış gerçekliğe kadar pek çok alanda karşımıza çıkan bilgisayar görüşü, web tabanlı uygulamalar için de giderek daha önemli hale gelmektedir.

JavaScript ekosistemi, web tarayıcılarının gücü ve yaygınlığı sayesinde bilgisayar görüşü yeteneklerini doğrudan istemci tarafına taşıma konusunda büyük bir potansiyel sunar. İşte bu noktada OpenCV.js devreye girer. OpenCV (Open Source Computer Vision Library), bilgisayar görüşü alanında en popüler ve kapsamlı kütüphanelerden biridir. C++ ile yazılmış bu güçlü kütüphanenin WebAssembly (WASM) teknolojisi sayesinde JavaScript ortamına taşınmış hali olan OpenCV.js, web geliştiricilerinin tarayıcıda karmaşık görüntü işleme ve analiz görevlerini gerçekleştirmesine olanak tanır.

Bu rehberde, OpenCV.js kullanarak JavaScript ile bilgisayar görüşüne nasıl başlayacağınızı adım adım öğreneceksiniz. Temel kurulumdan görüntü yüklemeye, gri tonlamaya çevirmeden kenar tespitine kadar birçok konuyu pratik kod örnekleriyle ele alacak, ayrıca gerçek zamanlı uygulamalar ve performans ipuçları hakkında da bilgiler edineceksiniz.

OpenCV.js’e Başlangıç

OpenCV.js ile çalışmaya başlamak oldukça basittir. Temel olarak bir HTML sayfası, OpenCV.js kütüphanesini yükleyen bir etiketi ve kendi JavaScript kodunuzu içeren başka bir etiketi yeterlidir.

Temel HTML ve JavaScript Yapısı

İlk olarak, index.html adında bir dosya oluşturalım. Bu dosya, görüntülerimizi göstereceğimiz bir etiketi, işlenmiş görüntüleri göstereceğimiz bir etiketi ve JavaScript kodumuz için gerekli script referanslarını içerecek.

    
    
    
    


    
OpenCV.js ile Görüntü İşleme

    
Orijinal Görüntü:
    

    
İşlenmiş Görüntü:
    

    
    

    
    

Yukarıdaki HTML dosyasında dikkat etmeniz gereken birkaç önemli nokta var:

• : İşlemek istediğimiz orijinal görüntüyü gösterecek. src özelliğine istediğiniz bir görselin URL'sini verebilirsiniz.
• : İşlenmiş görüntüyü göstereceğimiz yer.
• : Bu satır, OpenCV.js kütüphanesini CDN üzerinden asenkron olarak yükler. async özelliği sayfanın diğer içeriklerinin yüklenmesini engellemez. onload="onOpenCvReady()" ise kütüphane tamamen yüklendiğinde ve kullanıma hazır olduğunda onOpenCvReady fonksiyonunu çağırır. Bu, OpenCV.js ile çalışmaya başlamak için kritik bir adımdır.
• : Kendi JavaScript kodunuzu içeren dosya. Bu dosya, onOpenCvReady fonksiyonunu ve görüntü işleme mantığını içerecek.

Şimdi script.js adında bir dosya oluşturalım ve OpenCV.js'in yüklenmesini bekleyen temel yapıyı ekleyelim:

// OpenCV.js yüklendiğinde bu fonksiyon çağrılacak
function onOpenCvReady() {
    // cv objesi (OpenCV kütüphanesi) artık kullanıma hazır
    if (typeof cv !== 'undefined' && cv.onRuntimeInitialized) {
        console.log("OpenCV.js başarıyla yüklendi ve kullanıma hazır!");
        // Burada görüntü işleme işlemlerini başlatabiliriz.
        // Örneğin, bir fonksiyon çağırabiliriz:
        processImage();
    } else {
        console.error("OpenCV.js yüklenirken bir hata oluştu veya initialize edilemedi.");
    }
}

// Görüntü işleme fonksiyonumuz (şimdilik boş)
function processImage() {
    console.log("Görüntü işleme fonksiyonu çağrıldı.");
    // Görüntüyü yükleme ve işleme adımları buraya gelecek.
}

// Eğer OpenCV.js zaten yüklenmişse (örneğin daha önce çağrılmışsa), direkt çağır.
// Bu, bazı tarayıcılarda veya yükleme mekanizmalarında oluşabilecek bir durumu ele alır.
if (typeof cv !== 'undefined' && cv.onRuntimeInitialized) {
    onOpenCvReady();
}

Bu yapıyı kurduktan sonra index.html dosyasını tarayıcınızda açtığınızda, konsolda "OpenCV.js başarıyla yüklendi ve kullanıma hazır!" mesajını görmelisiniz. Bu, OpenCV.js'in düzgün çalıştığının bir işaretidir.

Temel Görüntü İşleme Operasyonları

OpenCV.js yüklendikten sonra, artık temel görüntü işleme operasyonlarına başlayabiliriz. OpenCV.js'teki tüm görüntü işleme fonksiyonları, görüntüleri cv.Mat (Matrix) adı verilen özel bir veri yapısı olarak bekler ve döndürür. Bu, görüntü piksellerini temsil eden çok boyutlu bir dizidir.

Görüntü Yükleme ve Gösterme

Bir HTML etiketindeki görüntüyü alıp bir cv.Mat objesine dönüştürmek ve ardından işlenmiş cv.Mat objesini bir 'a geri çizmek, sıkça yapılan iki temel işlemdir.

function processImage() {
    const imgElement = document.getElementById('imageSrc');
    const canvasElement = document.getElementById('imageCanvas');

    // 1. Orijinal görüntüyü bir Mat objesine dönüştür
    // cv.imread fonksiyonu, bir HTML elemanını (img, video, canvas) alıp Mat'a çevirir.
    let src = cv.imread(imgElement);

    // Canvas boyutunu orijinal görüntü boyutuna ayarla
    canvasElement.width = src.cols;
    canvasElement.height = src.rows;

    // 2. Mat objesini canvas'a geri çiz (işlenmemiş haliyle)
    // cv.imshow fonksiyonu, bir Mat objesini HTML canvas'ına çizer.
    cv.imshow(canvasElement, src);

    // Bellek yönetimi: İşimiz biten Mat objelerini silmeliyiz.
    // Aksi takdirde bellek sızıntıları yaşanabilir.
    src.delete();

    console.log("Görüntü başarıyla yüklendi ve gösterildi.");
}

Bu kod parçası, imageSrc ID'sine sahip etiketindeki görüntüyü okur, cv.Mat objesine dönüştürür, ardından bu Mat objesini imageCanvas ID'sine sahip 'a çizer. Son olarak, kullanılan src Mat objesini delete() metodu ile bellekten silmek önemlidir. Bu, WebAssembly belleğinde gereksiz yer kaplamayı önler.

Gri Tonlamaya Çevirme

Birçok görüntü işleme algoritması, renkli görüntüler yerine gri tonlamalı görüntüler üzerinde daha iyi veya daha hızlı çalışır. Gri tonlamaya çevirme, görüntünün karmaşıklığını azaltan temel bir işlemdir.

function processImage() {
    const imgElement = document.getElementById('imageSrc');
    const canvasElement = document.getElementById('imageCanvas');

    let src = cv.imread(imgElement);
    let dst = new cv.Mat(); // Yeni bir hedef Mat objesi oluştur

    // Canvas boyutunu orijinal görüntü boyutuna ayarla
    canvasElement.width = src.cols;
    canvasElement.height = src.rows;

    // Görüntüyü gri tonlamaya çevir
    // cv.cvtColor(kaynak_mat, hedef_mat, dönüştürme_kodu)
    // cv.COLOR_RGBA2GRAY: RGBA (kırmızı, yeşil, mavi, alfa) formatından gri tonlamaya çevir.
    // HTML canvas'ından gelen görüntüler genellikle RGBA formatındadır.
    cv.cvtColor(src, dst, cv.COLOR_RGBA2GRAY);

    // İşlenmiş görüntüyü canvas'a çiz
    cv.imshow(canvasElement, dst);

    // Bellek yönetimi: İşimiz biten Mat objelerini sil
    src.delete();
    dst.delete();

    console.log("Görüntü gri tonlamaya çevrildi ve gösterildi.");
}

Bu örnekte, cv.cvtColor fonksiyonunu kullanarak src Mat'ını dst Mat'ına gri tonlamalı olarak dönüştürüyoruz. cv.COLOR_RGBA2GRAY sabitini kullanarak dönüştürme türünü belirtiyoruz.

Kenar Tespiti (Canny)

Kenar tespiti, görüntüdeki nesnelerin sınırlarını bulmak için kullanılan önemli bir işlemdir. Canny kenar tespiti algoritması, gürültüyü azaltırken güçlü kenarları bulmada oldukça etkilidir.

function processImage() {
    const imgElement = document.getElementById('imageSrc');
    const canvasElement = document.getElementById('imageCanvas');

    let src = cv.imread(imgElement);
    let gray = new cv.Mat(); // Gri tonlamalı görüntü için
    let edges = new cv.Mat(); // Kenarlar için

    canvasElement.width = src.cols;
    canvasElement.height = src.rows;

    // 1. Görüntüyü gri tonlamaya çevir
    cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY);

    // 2. Canny kenar tespiti uygula
    // cv.Canny(kaynak_mat, hedef_mat, düşük_eşik, yüksek_eşik, açıklık_boyutu, L2_gradyan)
    // Düşük ve yüksek eşikler, hangi gradyan değerlerinin kenar olarak kabul edileceğini belirler.
    // Açıklık boyutu (aperture size) Sobel operatörü için kullanılır (genellikle 3).
    // L2 gradyan: Gradyan büyüklüğünü hesaplamak için L2 normunu kullanıp kullanmayacağımızı belirler (varsayılan false, yani L1).
    cv.Canny(gray, edges, 50, 100, 3, false);

    // İşlenmiş kenarları canvas'a çiz
    cv.imshow(canvasElement, edges);

    // Bellek yönetimi
    src.delete();
    gray.delete();
    edges.delete();

    console.log("Canny kenar tespiti uygulandı ve gösterildi.");
}

Bu örnekte, önce görüntüyü gri tonlamaya çeviriyoruz (gray Mat'ına). Ardından, cv.Canny fonksiyonunu kullanarak kenar tespiti yapıyoruz ve sonuçları edges Mat'ına kaydediyoruz. Eşik değerleri (50, 100), Canny algoritmasının kenarları nasıl filtreleyeceğini kontrol eder.

Daha İleri Konular ve Uygulamalar

Temel işlemlerin ötesine geçerek, OpenCV.js'in gerçek potansiyelini ortaya çıkaracak bazı daha gelişmiş konulara ve pratik uygulamalara değinelim.

Web Kamerası ile Gerçek Zamanlı İşleme

OpenCV.js'in en etkileyici kullanım alanlarından biri, web kamerası aracılığıyla gerçek zamanlı video akışlarını işlemektir. Bu, yüz tespiti, hareket takibi veya artırılmış gerçeklik uygulamaları için temel oluşturur.

Gerçek zamanlı işleme adımları genellikle şunları içerir:

1. Web kamerasına erişim izni almak (navigator.mediaDevices.getUserMedia).
2. Video akışını bir elemanına bağlamak.
3. Her video karesini belirli aralıklarla veya requestAnimationFrame kullanarak yakalamak.
4. Yakalanan her kareyi cv.imread ile bir cv.Mat objesine dönüştürmek.
5. cv.Mat üzerinde istenen görüntü işleme operasyonlarını gerçekleştirmek.
6. İşlenmiş cv.Mat objesini bir 'a cv.imshow ile çizmek.
7. Kullanılan cv.Mat objelerini delete() ile serbest bırakmak.

Basit bir video işleme döngüsü şöyle görünebilir:

let video = document.getElementById('videoInput'); // HTML'de 

Bu yapı, tarayıcıda doğrudan web kamerası görüntüsü üzerinde gerçek zamanlı olarak bilgisayar görüşü algoritmalarını çalıştırmanıza olanak tanır.

Nesne Tespiti ve Makine Öğrenimi Modelleri

OpenCV.js, sadece temel işlemlerle sınırlı değildir. Yüz tespiti için Haar Cascade sınıflandırıcıları gibi daha gelişmiş algoritmaları veya hatta önceden eğitilmiş derin öğrenme (DNN) modellerini kullanma yeteneğine de sahiptir.

• Haar Cascade Sınıflandırıcıları: Yüz, göz gibi belirli nesnelerin tespiti için kullanılan XML dosyalarıdır. OpenCV.js, bu dosyaları yükleyip cv.CascadeClassifier sınıfı ile kullanmanıza imkan tanır.
• Derin Öğrenme Modelleri: cv.dnn modülü sayesinde, ONNX, TensorFlow veya Caffe gibi formatlarda önceden eğitilmiş derin öğrenme modellerini yükleyebilir ve nesne sınıflandırma, nesne tespiti veya segmentasyon gibi görevler için kullanabilirsiniz. Bu, daha karmaşık ve doğru sonuçlar elde etmenizi sağlar, ancak performans ve model boyutu gibi faktörleri dikkate almayı gerektirir.

Performans İpuçları

Web tarayıcısında bilgisayar görüşü uygulamaları geliştirirken performansı optimize etmek kritik öneme sahiptir:

• Bellek Yönetimi (.delete()): OpenCV.js'in en önemli performans ipucu, her cv.Mat objesi ile işiniz bittiğinde mat.delete() metodunu çağırmaktır. WebAssembly belleği, JavaScript'in çöp toplayıcısı tarafından otomatik olarak yönetilmez. Unutulan Mat objeleri ciddi bellek sızıntılarına yol açabilir.
• Mat Objesi Yeniden Kullanımı: Her kare veya işlem için yeni cv.Mat objeleri oluşturmak yerine, mümkün olduğunca Mat objelerini yeniden kullanın. Örneğin, bir video işleme döngüsünde src ve dst Mat'larını döngü dışında bir kez oluşturup, her karede içlerini doldurmak daha verimlidir.
• Görüntü Boyutunu Küçültme: Özellikle gerçek zamanlı uygulamalarda, orijinal yüksek çözünürlüklü görüntüleri işlemek yerine, önce görüntüleri küçültmek (örneğin cv.resize ile) işlem süresini önemli ölçüde azaltabilir.
• Asenkron İşleme: Uzun süren işlemleri Web Workers kullanarak ana iş parçacığından ayırmak, tarayıcının donmasını önleyerek kullanıcı arayüzünün duyarlı kalmasını sağlar.
• Gereksiz İşlemlerden Kaçınma: Yalnızca gerçekten ihtiyacınız olan işlemleri yapın. Örneğin, gri tonlamalı bir görüntü üzerinde çalışıyorsanız, görüntüyü tekrar tekrar gri tonlamaya çevirmeyin.

Sonuç ve Sıkça Sorulan Sorular (SSS)

Bu rehberde, OpenCV.js ile JavaScript ortamında bilgisayar görüşüne giriş yaptık. Temel kurulumdan görüntü yüklemeye, gri tonlamaya çevirmeden kenar tespitine kadar birçok temel işlemi pratik kod örnekleriyle ele aldık. Ayrıca, web kamerası ile gerçek zamanlı işleme ve performans ipuçları gibi daha ileri konulara da değindik.

OpenCV.js, web geliştiricilerine tarayıcıda doğrudan güçlü bilgisayar görüşü yetenekleri sunarak, etkileşimli ve dinamik web uygulamaları oluşturma konusunda yeni kapılar açmaktadır. Yüz filtreleri, artırılmış gerçeklik deneyimleri, belge tarayıcıları veya erişilebilirlik araçları gibi birçok projeyi hayata geçirebilirsiniz. Kütüphanenin geniş fonksiyon setini keşfetmekten ve kendi yaratıcı projelerinizi geliştirmekten çekinmeyin!

Sıkça Sorulan Sorular (SSS)

S: OpenCV.js'in boyutu nedir ve performansı nasıl etkiler?
C: OpenCV.js kütüphanesi (WebAssembly modülü dahil) oldukça büyüktür (birkaç MB). Bu nedenle, yüklenmesi biraz zaman alabilir. async ve defer anahtar kelimelerini kullanarak veya kütüphaneyi bir Web Worker içinde yükleyerek ana iş parçacığının engellenmesini önlemek önemlidir. Performans, tarayıcının WebAssembly desteğine ve kullanıcının donanımına bağlıdır. Modern tarayıcılarda ve cihazlarda genellikle iyi performans sergiler, ancak karmaşık algoritmalar için optimizasyonlar gerekebilir.

S: OpenCV.js tüm tarayıcılarda çalışır mı?
C: OpenCV.js, WebAssembly'i destekleyen tüm modern tarayıcılarda (Chrome, Firefox, Safari, Edge vb.) çalışır. Eski tarayıcılarda veya belirli mobil tarayıcı sürümlerinde uyumluluk sorunları yaşanabilir.

S: Bellek sızıntılarını nasıl önleyebilirim?
C: Her cv.Mat objesi ile işiniz bittiğinde mutlaka mat.delete() metodunu çağırın. Bu, WebAssembly belleğinde ayrılan alanı serbest bırakır. Özellikle döngülerde veya gerçek zamanlı işlemlerde bu adımı atlamamak kritik öneme sahiptir.

S: OpenCV.js ile hangi tür projeleri geliştirebilirim?
C: Yüz tanıma/tespit, nesne takibi, artırılmış gerçeklik filtreleri, görsel efektler, QR kod okuyucular, belge tarama ve düzenleme, hareket tespiti, oyunlar ve etkileşimli deneyimler gibi birçok projeyi geliştirebilirsiniz.

S: Daha fazla kaynak ve dokümantasyon nerede bulabilirim?
C: OpenCV.js'in resmi dokümantasyonu (docs.opencv.org), kütüphanenin tüm fonksiyonları ve kullanım örnekleri hakkında kapsamlı bilgi sunar. Ayrıca, GitHub deposu ve çeşitli online eğitim platformları da faydalı kaynaklardır.