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:

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:

  1. utworzymy funkcję, która odczytuje zawartość grafiki i ją modyfikuje (tylko kanał alfa),
  2. zdefiniujemy kontekst płótna i zmienne związane z szybkością animacji oraz poziomem jasności - bright,
  3. 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>
Lupa





© medianauka.pl, 2018-07-11, A-3569



©® Media Nauka 2008-2023 r.