Canvas — zarządzanie pikselami

Michał Środek — Sat, 17 Apr 2010 15:26:05 +0000

Pracuję aktualnie nad oskryptowaniem, które zostanie użyte na stronie mojego przyjaciela(http://szescian.pl/). Sęk w tym, że jego bujna wyobraźnia wygenerowała coś, z czym mogę mieć niemałe problemy. Mówiąc krótko: dużo matematyki oraz sporo generowania wielokątów. Postanowiłem, że użyję do tego celu technologii canvas. Mając chwilę czasu chciałbym się z wami podzielić kilkoma fajnymi technikami. O rysowaniu wielokątów napiszę innym razem. Dzisiaj chciałbym pokazać wam coś co dla wielu prawdopodobnie wydawałoby się niemożliwe . Spróbujemy przekonwertować, piksel po pikselu, obrazy za pomocą JavaScript.

Jako obraz poglądowy wybrałem jedno z moich zdjęć:

Spróbujmy najpierw stworzyć obiekt canvas, nadać mu identyfikator oraz po prostu wczytać do niego obrazek.

// wybranie elementu 
var myCanvas = document.getElementById('myCanvas');
 
// sprawdzenie czy można pobrać kontekst
if (myCanvas.getContext) {
  // pobranie "kontekstu 2d"
  var ctx = myCanvas.getContext('2d');
  if (ctx) {
 
  // stworzenie nowego obrazka
  var img = new Image();
  // okreslenie adresu
  img.src = '/examples/canvas1/mini.jpg';
 
  // stworzenie zdarzenie wywołanego po wczytaniu obrazka
  img.addEventListener('load', function () {
 
    // rysuj obrazek rozpoczynajac od wspolrzednych 0,0 pola canvas
    ctx.drawImage(this, 0,0, 150, 150);

Kolejnym krokiem jest wczytanie informacji o pliku. Chcę stworzyć 3 modyfikacje mojego zdjęcia więc robię to trzykrotnie.

   // Get the pixels.
    var imgdata = ctx.getImageData(0, 0, 150, 150);
    var imgdata2 = ctx.getImageData(0, 0, 150, 150);
    var imgdata3 = ctx.getImageData(0, 0, 150, 150);

Spróbujmy wykonać pierwsze przekształcenie polegające na konwersji zdjęcia do palety szarości.

   var pix = imgd.data; 
   for (var i = 0, n = pix.length; i < n; i += 4) {
      pix[i] = 0.2989*pix[i] + 0.5870*pix[i+1] + 0.1140*pix[i+2]; // czerwony
      pix[i+1] = 0.2989*pix[i] + 0.5870*pix[i+1] + 0.1140*pix[i+2]; // zielony
      pix[i+2] = 0.2989*pix[i] + 0.5870*pix[i+1] + 0.1140*pix[i+2]; // niebieski
    }
    ctx.putImageData(imgdata, 150, 0);

Krótkie wytłumaczenie:
Najpierw została pobrana tablica pikseli. Sposób zapisu danych na ich temat jest troszkę nietypowy. Każdy piksel jest mieszaniną trzech(czerwony, zielony, niebieski) kolorów oraz współczynnika przezroczystości. Dlatego, nasza tablica posiada 90 tys. elementów(150x150x4). Skacząc w pętli co cztery elementy, za każdym razem otrzymujemy nowy piksel do przebadania. Każdy z nich jest przekształcany na jeden z odcieni szarości. Na końcu obraz jest umieszczany w miejscu o współrzędnych 150,0(pierwszych 150 pikseli zajmuje nieprzekształcone zdjęcie, które umieściliśmy już wcześniej.

Spróbujmy odwrócić kolory:

 
   var pix = imgdata2.data;
   for (var i = 0, n = pix.length; i < n; i += 4) {
      pix[i] = 255 - pix[i]; // czerwony
      pix[i+1] = 255 - pix[i+1]; // zeilony
      pix[i+2] = 255 - pix[i+2]; // niebieski
    }
    ctx.putImageData(imgdata2, 300, 0);

Ostatnim przekształceniem będzie zabawa z kolorami . Wydzieliłem również pas pikseli, który będzie przekształcany w inny sposób. W ten sposób można tworzyć efekty punktowe(np. podświetlić na biało oczy).

   var pix = imgdata3.data;
 
   for (var i = 0, n = pix.length; i < n; i += 4) {
	  if(i<15000 || i> 75000){
              pix[i  ] = 25+pix[i]/2+pix[i+1]/5; // czerwony
              pix[i+1] = 25+pix[i+1]/2+pix[i+2]/5 ; // zielony
              pix[i+2] = 25+pix[i+2]/2+pix[i]/2; // niebieski
	  }
	  else
	  {
              pix[i  ] = pix[i]; // czerwony
              pix[i+1] = pix[i+1]/2+50 ; //zielony
              pix[i+2] = pix[i+2]/2+40; // niebieski
	  }
    }
    ctx.putImageData(imgdata3, 450, 0);

Oczywiście musimy jeszcze uzupełnić parametry funkcji oraz zamknąć wszystkie nawiasy.

  }, false);
 
  }
}

Pamiętajmy jednak, że element canvas jest niedostepny w starszych przeglądarkach Internet Explorer. Jeśli się nie mylę dopiero 9 wersja zacznie go obsługiwać poprawnie.

Cały przykład dostępny w postaci pliku js: canvas.js

Efekt działania:

Michał Środek » grafika

Canvas — zarządzanie pikselami