HTML5 Canvas Ders-17 Resim Bilgilerini Alma - getImageData()
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

HTML5 Canvas Ders-17 Resim Bilgilerini Alma - getImageData()

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(1471)
RAPOR ET
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ü :
http://ustaderslik.com/resim/ders/r7sd4guı1.png



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol