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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <canvas id="canvas"></canvas> <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0); img.style.display = 'none'; }; img.src = 'res.jpg'; ctx.fill(); </script> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <canvas id="canvas"></canvas> <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0); img.style.display = 'none'; }; img.src = 'res.jpg'; ctx.fill(); var opak = function() { var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); var data = imageData.data; for (var i = 0; i < data.length; i += 4) { // data[i] kırmızı // data[i+1] yeşil // data[i+2] mavi data[i + 3] = 50; //alfa 0-255 arasında değer alır // data[i + 3] = data[i + 3]*0.8; /*yüzde 20 düşürür*/ } ctx.putImageData(imageData, 0, 0); }; canvas.addEventListener('click', opak); </script> |
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.
1 2 3 | img.src = canvas.toDataURL(); |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> </head> <body> <canvas id="canvas"></canvas> <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0); img.style.display = 'none'; }; img.src = 'res.jpg'; ctx.fill(); var opak = function() { var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); var data = imageData.data; for (var i = 0; i < data.length; i += 4) { // data[i] kırmızı // data[i+1] yeşil // data[i+2] mavi //data[i + 3] = 50; //alfa 0-255 arasında değer alır data[i + 3] = data[i + 3]*0.8; /*yüzde 20 düşürür*/ } ctx.putImageData(imageData, 0, 0); }; canvas.addEventListener('click', opak); </script> </body> </html> |
Kaynak:
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
Yorum Yap