HTML5 Canvas

HTML5 Canvas Resim Verisi

Canvas üzerindeki dikdörtgen alanın her pikseli için resim verilerini elde etmek için, ResimVeri nesnesini tuval bağlamının getImageData() yöntemiyle alabilir ve sonra piksel özelliklerine data özelliğinden erişebiliriz. Resim verilerindeki her piksel, kırmızı, yeşil, mavi ve alfa bileşeni olan dört bileşen içerir.

Resim verisi nesnesiyle piksel verilerine erişmek için üç yaygın teknik vardır.

  • bölgenin sol üst köşesinden başlayarak sağ alt köşesine kadar tüm pikselleri yineleyerek
  • x, y koordinatlarına dayalı piksel verilerini toplama
  • Her piksel için x, y koordinatlarını takip ederken tüm piksellerin üzerinde yineleme

Not: getImageData() yöntemi, görüntünün, yürüten kodla aynı etki alanına sahip bir web sunucusunda barındırılmasını gerektirir. Bu koşul yerine getirilmezse, bir SECURITY_ERR istisnası atılır.

Çıktı:

Kod:

 

Yorum bırak