HTML5 Canvas Ders-18 Resim Renklerni Değiştirme - putImageData()
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-18 Resim Renklerni Değiştirme - putImageData()

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