18 Temmuz 2016 Pazartesi
HTML5 CANVAS PİXEL MANUPLE ETME (PİKSEL PİKSEL ANALİZ ETTİK RESMİ)
<!DOCTYPE html>
<html>
<head>
<style>
canvas{
border:1px solid #d3d3d3;
/* background-color: #000;*/
canvas {
cursor:none;
}
}
</style>
<script>
window.onload = function () {
benimtuval=document.getElementById("mycanvas");
ctx=benimtuval.getContext("2d");
resim=document.getElementById("resim");
ctx.drawImage(resim,0,0);/*resmin hepsini tuvale yazdırdık.*/
var resimdata=ctx.getImageData(0,0,600,400);/*piksel piksel renk bilgisini alır*//*sadece bir pikselini aldık(0,0,1,1)*/
console.log(resimdata);
for(var a=0;a<resimdata.data.length;a+=4){
//rgba
resimdata.data[a]=255-resimdata.data[a]//r(red)
resimdata.data[a+1]=255-resimdata.data[a+1];//g(green)
resimdata.data[a+2]=255-resimdata.data[a+2];//b(blue)
resimdata.data[a+3]=resimdata.data[a+3];//a
}
ctx.putImageData(resimdata,0,0);
}
</script>
</head>
<body>
<img id="resim" src="bebek.png" style="display:none"/>
<canvas id="mycanvas" width="600" height="400" >
Your browser does not support the HTML5 canvas tag.</canvas>
</body>
</html>
Kaydol:
Kayıt Yorumları (Atom)
Hiç yorum yok:
Yorum Gönder