Her Tür Bilginin Adresi Her Tür Bilginin Adresi
Canvas elementinin HTML5 için çok kullanışlı bir element olduğunu söyleyebilirim. JavaScript ile birleştiği takdirde büyük projelerin gerçekleştirilebileceği, oyunların dahi daha rahat bir şekilde yapılabileceği bir element.
Bugün Canvas elementi ile ilgili butona tıklandığı zaman Canvas’daki resmin siyah-beyaz formata dönüştürüldüğü bir örnek yapmaya çalıştım. Tabii bunu yapmam için JavaScript’i kullanmam gerektiğini de biliyordum. Öncelikle HTML kısmında Canvas elementini oluşturmam gerekiyordu. Bunun için;
[html] <body onmousedown="return false;"><canvas id="myCanvas" width="340" height="548">
</canvas>
<br></br>
<button onClick="tikla()" type="button">Tıkla Değişsin</button>
</body>
[/html]
Id=”myCanvas” olan genişliğini ve yüksekliğini belirttiğim bir alan oluşturdum. Daha sonra butonumu oluşturarak, tıkla adında bir metot yaratarak tıklandığı zaman o metodu çağırmasını sağladım.
[html] <head><style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid black;
}
</style>
<script>
window.onload = function(){
var imageObj = new Image();
imageObj.onload = function(){
normalresim(this);
};
imageObj.src = "img/atakule.jpg";
};
function normalresim(imageObj){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var X = 0;
var Y = 0;
context.drawImage(imageObj, X, Y);
}
function tikla(){
var imageObj = new Image();
imageObj.onload = function(){
imagetogray(this);
};
imageObj.src = "img/atakule.jpg";
};
function imagetogray(imageObj){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var X= 0;
var Y = 0;
context.drawImage(imageObj, X, Y);
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
data[i] = brightness; //kırmızı
data[i + 1] = brightness; //yesil
data[i + 2] = brightness;
}
context.putImageData(imageData, 0, 0);
}
</script>
</head>
[/html]
Fonksiyonum ilk başta önceden ayarladığım resmi değişkene atarak onun üzerinden işlem yapmamı sağlayacak.
Imagetogray metodunu çağırarak internet üzerinden araştırdığım resmi siyah-beyaz formata çeviren matematiksel formülü uygulayarak resmi istediğim gibi yapmamı sağladım. Ve web tarayıcısı ile çalıştırdığım zaman şu sonucu aldım.
Belki bunu başka yöntemle yapmak istesem yüzlerce satır komut yazmam gerekebilirdi. Fakat JavaScript+HTML5 benim işlemlerimi kısaltarak daha hızlı sonuç almamı sağladı.
