HTML5 Canvas - operacje na pikselach

W tym artykule zajmiemy się zagadnieniem pobierania i modyfikowania pikseli wyświetlanego obrazu.

W tym celu użyjemy metody:

var imageData = context.getImageData(x,y,dx,dy);

UWAGA! Zabezpieczenia przeglądarki wymagają, aby strona z przykładem była pobierana z serwera. Przykład nie będzie więc działał lokalnie.

Po pobraniu obrazka otrzymujemy dostęp do tablicy pikseli:

var tablica = imageData.data;

Pobieramy w ten sposób dane o wszystkich pikselach.

Tablica zawiera nastepujące składowe:

tablica[i] - kolor czerwony (R)
tablica[i+1]-kolor zielony (G)
tablica[i+2] - kolor niebieski (B)
tablica[i+3] - kanał alfa (A)

Składowe kolorów są w zakresie od 0 do 255, także dla kanału alfa. Zmienna 'i' oznacza koleny numer piksela, licząc od zera.

Przykład

Stworzymy efekt zaniku obrazka. W tym celu:

utworzymy funkcję, która odczytuje zawartość grafiki i ją modyfikuje (tylko kanał alfa),
zdefiniujemy kontekst płótna i zmienne związane z szybkością animacji oraz poziomem jasności - bright,
utworzymy obiekt typu image, któremu przypiszemy w odpowiednich odstępach czasu wywołanie utworzonej wcześniej funkcji dla zmieniającego się parametru bright.

Zobaczmy to na przykładzie:

<html>
<head>
<script>
function focusImage(canvas, context, imageObj, bright){
 //odczytujemy parametry obrazka
 var sw = imageObj.width;
 var sh = imageObj.height;
 var sx = canvas.width / 2 - sw / 2;
 var sy = canvas.height / 2 - sh / 2;
 var destX = sx;
 var destY = sy;
 //odczyt pikseli obrazka
 var imageData = context.getImageData(sx, sy, sw, sh);
 var piksele = imageData.data;

 for (var i = 0; i < piksele.length; i += 4) {
	var b=piksele[i+3]; //pobranie kanału alfa
	if(b>bright) {piksele[i+3]=b-bright;}//nadpisanie kanału alfa
 }
				
document.getElementById("akapit").innerHTML = 'Bright: '+bright;
// nadpisujemy grafikę
context.putImageData(imageData, destX, destY);
}

window.onload = function(){
		var canvas = document.getElementById("myCanvas");
		var context = canvas.getContext("2d");
		var fps=30; 
		var timeInterval=1000/fps;
		var bright = 0;
		//tworzymy obrazek          
		var imageObj = new Image();
		imageObj.onload = function(){
		var sw = imageObj.width;
		var sh = imageObj.height;
		var destX = canvas.width/2 - sw/2;
		var destY = canvas.height/2 - sh/2;
		var intervalId = setInterval(function(){
		context.drawImage(imageObj, destX, destY);
 	if (bright > 255) {clearInterval(intervalId);} else {focusImage(canvas, context, imageObj, bright++);}
}, timeInterval);
};
imageObj.src = "grafika/ikona-biologia.gif";

</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid black;">
<p id='akapit'></p>
</canvas>
</body>
</html>