HTML5 canvas derslerimize devam ediyoruz.Bu derste resmin renkleriyle oynamayı göstereceğim.Geçen derste
getImageData 'yla resmin verilerini çekmiştik.GetImageData resmin her pixelin verisini veriyordu.Bu verileri değiştirebiliriz.Değiştirdiğimiz bu verileri
putImageData() ile resme uygulayabiliriz.
İndir : http://ustaderslik.com/dosya/HTML5%20Canvas%20Resim%20Renklerni%20Değiştirme%20-%20putImageData().zip
putImageData(resminveriobjesi,x,y)
PutImageData 3 parametre alıyor.İlki getImageData ile belirlediğimiz alanı atadığımız değişken.Diğerleri başlama konumu.
Örnekte 2 çeşit renk oynaması yaptım.İlki rengi ters çeevirme,diğeri siyah beyaz yapma.RGB verilerini aldığımız için istediğimiz gibi değişimler yapabiliriz.
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ı
resimveri,//resmin ilk veriler
veri,//tüm verileri depolayacağımız değişken
ov=new Array;//orjinal verilerin saklayacağı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
resimveri = cizim.getImageData(rx,ry,genislik,yukseklik);//resmin tüm verilerini al
veri = resimveri .data;//verileri değişkenimize ata
for(var i = 0; i <veri.length; i += 4) {//orjinal resim verilerini ov atlı arraya aktarıyorum.
ov[i] = veri[i]; ov[i+1] = veri[i+1]; ov[i+2] = veri[i+2]; ov[i+3] = veri[i+3];
}
};
resim.src = 'resim.jpg'; //resmin adresini belirliyoruz.
$("#ters").click(function(){//ters çevirile basılırsa
for(var i = 0; i <veri.length; i += 4) {//tüm verileri 4 er 4 er getir
veri[i] = 255 - veri[i];
veri[i+1] = 255 - veri[i+1];
veri[i+2] = 255 - veri[i+2];//red green blue max 255 alır.255-veri değeri onun tersini verir
}
cizim.putImageData(resimveri,rx,ry);//verileri değiştir.
})
$("#ters2").click(function(){
for(var i = 0; i <veri.length; i += 4) {
veri[i] = 255 - veri[i];
veri[i+1] = 255 - veri[i+1];
veri[i+2] = 255 - veri[i+2];
}
cizim.putImageData(resimveri,-300,ry);//başlama konumunu -300 yaptık.bu şekilde yarısı dışarda kaldığı için gözükmüyor.
})
$("#gri").click(function(){//grileştire tıklanırsa
for(var i = 0; i < veri.length; i += 4) {//tüm verileri 4 er 4er al
var sb = (0.34 * veri[i]) + (0.5 * veri[i + 1]) + (0.16 * veri[i + 2]);//oranı bilmiyorum.:) ama verileri kullanarak siyah-beyaz çeviriyor
veri[i] = sb;
veri[i+1] = sb;
veri[i+2] = sb;//veriyi atıyoruz
}
cizim.putImageData(resimveri,rx,ry);//Verileri değiştiriyoruz.
})
$("#normal").click(function(){//normal hale çevire tıklanırsa
for(var i = 0; i <veri.length; i += 4) {//tüm verileri 4 er 4 er al
veri[i] = ov[i];
veri[i+1] = ov[i+1];
veri[i+2] = ov[i+2];//verilere orjinal Averileri ata
}
cizim.putImageData(resimveri,rx,ry);//Verileri değiştir.
})
})
</script>
<style type="text/css">
*{margin:0;padding:0;}
.ortala{width:600px;margin:auto;margin-top:25px;}
button{padding:10px;}
</style>
</head>
<body>
<div class="ortala">
<canvas id="canvas" width="600" height="400"></canvas>
<br /><br /><button id="normal">Renkleri Normal yap</button><br />
<br /><button id="ters">Renkleri Ters Çevir / Düzelt</button><br />
<br /><button id="ters2">Renkleri Yarısını Ters Çevir / Düzelt</button><br />
<br /><button id="gri">Renkleri Siyah/Beyaz</button><br />
</div>
</body>
</html>
Görüntüsü :
UstaDerslik
