Canvas API, bir web tarayıcısında grafik çizmek için tasarlanmıştır. Animasyon, oyun grafikleri, veri görselleştirme, görüntü düzenleme, gerçek zamanlı video işleme vb. için kullanılabilir. Ayrıca tarayıcı parmak izi yoluyla çevrimiçi izleme için de kullanılabilir. Teknoloji, bir kullanıcının tarayıcısının kişiselleştirilmiş dijital parmak izini oluşturmak için bir tuval görüntüsünün farklı web tarayıcıları ve platformlarda nasıl işlendiğine ilişkin değişikliklere dayanır. Ancak aynı ekipman ortamında tekrarlamak mümkündür.

Tuval işlevi algılama

• Canvas 2D API
• Text API for Canvas
• Canvas toDataURL(genellikle parmak izi tanıma için kullanılır)
• OffscreenCanvas API
• Canvas native

  Canvas toDataURL işlevi tarayıcı eklentileri tarafından da değiştirilebilir ancak kolayca tanımlanabilir

• istikrar

  Canvas aynı cihazda ve tarayıcı ortamında kararlıdır

• insan dışı gürültü

  Bazı parmak izi tarayıcıları veya parmak izi eklentileri tuval gürültüsüne parametreler ekleyebilir ancak bunlar yine de tanınabilir.

Resim ayrıntıları

Kanvas Parmak İzinin Nedenleri

Bir Kanvas görüntüsünün tuval üzerinde oluşturulma şekli web tarayıcısına, işletim sistemine, grafik kartına ve diğer faktörlere bağlı olarak değişiklik gösterebilir ve sonuçta parmak izi oluşturmak için kullanılabilecek benzersiz bir görüntü ortaya çıkabilir.

1. Kenar yumuşatma

Kenar yumuşatma bir tür güzellik filtresidir ve yaygın olarak kullanılır. İşletim sisteminde yazı tipi yumuşatma etkinleştirilmemişse, bazı yazı tipleri bilgisayar monitörünüzde berbat görünecektir. Genel olarak konuşursak, Windows işletim sistemleri yazı tipi ve görüntü yumuşatmayı varsayılan olarak açar. Mac OS X'te kenar yumuşatma yalnızca belirli bir boyutun altındaki yazı tipleri için işe yarıyor gibi görünüyor. Yalnızca işletim sistemi düzeyinde değil, bazı tarayıcıların kendi yerleşik kenar yumuşatma teknolojileri de vardır. Örneğin, Safari kendi yerleşik yazı tipi oluşturma motorunu kullanır. Ve hepsinden iyisi, kenar yumuşatma teknolojisi, Canvas'ta yazı tipleri ve görseller çizerken de işe yarar.

Aşağıdaki şekilde gösterildiği gibi, sol taraf yazı tipi yumuşatmanın etkinleştirilmediği durumu gösterirken sağ taraf bunun etkinleştirildiğini gösterir:

Anti-aliasing teknolojisi saf renkli olmayan bazı pikseller üretecek ve bu ara durumlardaki piksel değerleri grafik kartının renk profilinden etkilenerek farklı renkler oluşmasına neden olacaktır. Yeterince büyük bir tuval üzerine aynı yazı tipleri ve görseller çizilip ardından tüm piksel verileri hesaplanarak nispeten benzersiz parmak izi verileri elde edilebilir.

2. Yazı Tipi İpuçları

İnce ayarın bir özelliği de ızgaraya sığdırmaktır; bu, yazı tipi karakterlerinin yüksekliğini ve genişliğini, ekranda görüntülenen belirlenmiş piksel ızgarasıyla hizalayacak şekilde değiştirmek anlamına gelir. Görüntü ekranda küçük karelerden oluşan bir ızgara olarak görüntülenir. Yazı tipleri, ızgarada doğru şekilde görüntülenmelerini sağlamak için sola ve sağa hareket ettirilebilir. Bu aynı zamanda yazı tipi şeklinin ve düzeninin farklı ekranlarda kabaca aynı görünmesini sağlamak içindir. ekranlar.

Düzinelerce farklı kullanıcıdan alınan tuval görsellerinin bir koleksiyonu olan aşağıdaki GIF görseli aracılığıyla, aynı kodun farklı cihaz ortamlarında sunumundaki farklılıkları sezgisel olarak görebiliriz:

Yukarıdaki görsel detaylarında da görüldüğü gibi genel anlamda Canvas görselinin base64 verisini almak için toDataURL fonksiyonunu çağırabilir veya Canvas tarafından oluşturulan PNG görselinin veri bloğundan IDAT bloğunun CRC sağlama toplamını alabiliriz. Daha sonra bu dizenin karmasını (base64 veya CRC sağlama toplamı) Canvas parmak izi olarak hesaplayabiliriz (kesin algoritma siteden siteye değişir).

Not: Canvas parmak izlerinin web sitesinden web sitesine değişmesinin birçok nedeni vardır. Kullanılan farklı dizeler (base64 veya CRC sağlama toplamı), farklı karma algoritmalar (MD5, SHA, MUMUHASH vb.) Canvas parmak izini tamamen farklı hale getirecektir. Kanvas parmak izi sabit olduğundan, aynı tarayıcı ve cihaz ortamında, aynı web sitesindeki Kanvas parmak izi sabitlenir. Bu aynı zamanda kararlı özelliklere sahip, kullanıcı destekli tanımlama için kullanılacak Kanvas parmak izinin teorik temelidir.