HTML5 canvas derslerimize devam ediyoruz.Bu derste
getImageData() fonksiyonunu anlatacağım.GetImageData belirlediğimiz alan içindeki resimlere ait 4 bilgiyi pixele göre alıp bize verir.Bu veriler rgb ye ait olan
red,green,blue verileri.Bunların dışında birde
alpha değerini verir.Örnek 600x400 bir resmimiz var.Biz 600x400 bir veriyi al dediğimizde
600x400x4=960.000 veriyi saklar.
İndir : http://ustaderslik.com/dosya/HTML5%20Canvas%20Ders-17%20Resim%20Bilgilerini%20Alma%20-%20getImageData().zip
getImageData(x,y,genişlik,yükseklik)
x,y :Verinin alınmaya başlayacağı konum.
genişlik,yükseklik :Başlama noktasında itibaren ne kadarlık alanda veri alınacağını belirliyoruz.Örnek 0,0,100,100 yazarsak 0,0 dan 100x100 bir kutuluk alanı kapsar.
GetImageData 2 şekilde veri sunuyor bize.Biri tüm veriler diğeri koordinata göre veriyor.
Normal olarak veri alırken tüm veriler ard arda sıralanır bu yüzden for 4 er 4 er artırırız.Örnek i=0 ise 0=red 1=green 2=blue 3=alpha oluyor.bu verileri alıp i yi 4 artırırız 2 pixelin verisini bize verir.
Koordinata göre veriyi alırken
(genislik * y) + x) * 4 diye alırız.Bu bize redi verir 1 fazlası green 2 fazlası blueyı 3 fazlası alphayı verir bize.
Biraz karmaşık örneği inceleyince daha iyi anlarsınız.
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){
var canvas = document.getElementById('canvas'),
cizim = canvas.getContext('2d');//klasik canvas bağlantısı
var rx =0,
ry =0,//resimin başlama konumu
genislik =600,
yukseklik =400,//resmin boyutları
veri;//tüm verileri depolayacağımız değişken
var resim = new Image();//resim yaratırıyoruz.
resim.onload = function() {//resim yüklendiğinde
cizim.drawImage(resim,rx,ry,genislik,yukseklik);//resmi ekrana bas
var resimveri = cizim.getImageData(rx,ry,genislik,yukseklik);//resmin tüm verilerini al
veri = resimveri .data;//verileri değişkenimize ata
};
resim.src = 'resim.jpg'; //resmin adresini belirliyoruz.
$("#canvas").click(function(e){//canvasa tıklanırsanız
var x=e.pageX-($(document).width()-600)/2,//mousenin canvas üzerindeki x konumu
y=e.pageY-25;//y konumu
var red=veri[((genislik * y) + x) * 4],
green=veri[((genislik * y) + x) * 4 + 1],
blue=veri[((genislik * y) + x) * 4 + 2],
alpha=veri[((genislik * y) + x) * 4 + 3];//resmin genişliğini kullarak tıklanan koordinatın verinin yerini buluyoruz.
$("#bilgi").html("<b>x :</b>"+x+"<b> y :</b>"+y+"<b> red :</b>"+red+"<b> green :</b>"+green+"<b> blue :</b>"+blue+"<b> alpha :</b>"+alpha+"<br />")
.css("background","rgb("+red+","+green+","+blue+")");//verileri bilgi idine sahip dive yerleştirip arka planını değiştiriyoruz.
})
$("#al").click(function(){//tüm verileri al butonuna tıklanırsa
for(var i = 0, n =veri.length; i < n; i += 4) {
var red=veri[i],
green=veri[i + 1],
blue=veri[i + 2],
alpha=veri[i + 3];//her koordinata ait 4 veriyi alıp ekrana basıyoruz.
$("#bilgi2").append("<b>red :</b>"+red+"<b> green :</b>"+green+"<b> blue :</b>"+blue+"<b> alpha :</b>"+alpha+"<br />")
}
})
})
</script>
<style type="text/css">
*{margin:0;padding:0;}
.ortala{width:600px;margin:auto;margin-top:25px;}
#bilgi,#bilgi2,#al{padding:10px;}
</style>
</head>
<body>
<div class="ortala">
<canvas id="canvas" width="600" height="400"></canvas>
<br /><br />
<div id="bilgi">Resime tıkla...</div>
<br /><button id="al">Resimdeki tüm pixellerin verilerini al. 600x400x4 TANE</button><br />
<div id="bilgi2"></div>
</div>
</body>
</html>
Görüntüsü :
UstaDerslik
