HTML5 Canvas Kullanarak Resimlerin Saydamlığını Değiştirme – Tasarım Kodlama
HTML5 Canvas

HTML5 Canvas Kullanarak Resimlerin Saydamlığını Değiştirme

Bu makalede, sadece html5 canvas öğesi ve javascript ile tüm resim türlerinde  şeffaflığın nasıl değiştireleceğini anlatacağım. Daha önce sitedeki HTML5 Canvas yazılarını okuduysanız bunun nasıl çalıştığı hakkında ilk tahmininiz “hey, globalAlpha‘yı istediğim değere ayarlayalım, sonra resmimi tuvale çekelim ve işe yarayacak”. Ne yazık ki bu, bu sorunun tam olarak çözümü değildir. Bu yazıda resim dosyalarının nasıl kodlandığını, hatta alpha değerini değiştirirken resimlere nasıl filtre yapıldığını anlayacağınızı düşünüyorum.

Neyse işte resim şeffaflığı için örnek uygulamayı adım adım anlatalım.

1. Adım: Çocuk oyuncağı olan kısım, bir tane canvas ve resim dosyasını alalım.

 

2. Adım: Burası ilginç olan kısım(dikkatli okuyun)

Burası, çözümün daha ilginç kısmı. Resim verilerine erişmeli, görüntünün tüm piksellerini ulaşmalıyız. Her piksel içindeki alfa değerlerini istediğimiz değere ayarlamalıyız. Görüntü verilerindeki bir piksel dört değerle temsil edilir: kırmızı, yeşil, mavi, alfa (rgba) bu nedenle her dördüncü değeri değiştirmemiz gerekir.

Aslında bu renk olayı tüm web yapılarında aynı şekilde olmaktadır. Bir resmin rengini açmak istiyorsanız da aynı şekilde rgb değerleri ile oynaya bilirsiniz.

resme tıklandığında resmin opaklığını düşürmektedir.

Adım 3: Herşey tamam ama bunu img etiketine nasıl eklerim diyorsanız. İşte size çözümü, toDataURL işleviyle yeni resim verilerine erişebilir ve görüntüye ayarlayabilirsiniz.

Varsayılan veri url resim türünün .PNG olduğunu aklınızda bulundurun, bu nedenle saydamlığa sahip olabilirsiniz.

Örnek: Resme tıkladıkça resmin opaklığını düşürme

 

Kaynak:

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas

 

 

Yorum bırak