Archiwum

Archive for Maj 2012

[html5] canvas–czerń I biel

Wprowadzenie

Canvas jest jednym z najciekawszych elementów, które pojawiły się w specyfikacji HTML5. Płótno jakie udostępnia nam znacznik pozwala na dynamiczną manipulację elementami graficznymi oraz na generowanie nowych obrazów w kodzie JavaScript. Canvas pozwala na jednostkowe operacje na pikselach, które składają się z czterech elementów: koloru czerwonego, koloru zielonego, koloru niebieskiego oraz kanału alfa – piksele są ułożone w ciągu, który jest numerowany od lewej do prawej i od góry do dołu.

Wszystkie przykłady będą wykorzystywać obrazek prezentujący logo HTML5:

image

Zakładam, że plik nazywa się htm5logo.jpg i znajduje się w tym samym katalogu, w którym zapisywać będziemy prezentowane w przykładach strony

Czerń i biel

Jednym z najczęstszych zastosowań konwersji kolorów na stronach internetowych jest potrzeba zamiany kolorowych obrazków w czarno-białe. Prezentowana przeze mnie metoda zamieniająca obrazki kolorowe na czarno-białe jest oparta o wzór matematyczny, który dla każdego piksela stosuje następującą regułę:

Kolor czerwony x 0.3 + kolor zielony x 0.59 + kolor niebieski x 0.11

Poniżej prezentuję przykładowy kod strony internetowej, na której zostanie wczytany obrazek z logiem HTML5.

Szkielet strony:

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<img id="html5Logo" src="html5logo.jpg" alt="Logo" />

</body>

</html>

Po zapisaniu pliku z powyższą zawartością i rozszerzeniem html w przeglądarce internetowej powinniśmy zobaczyć następującą zawartość:

image

Kolejnym krokiem jest dodanie znaku nowej linii oraz płótna pod deklaracją obrazka:

<br/>

<canvas id="transformArea" width="500" height="300" />

Następnie dodajemy w sekcji head kod JavaScript:

<script type="text/javascript">

</script>

W sekcji script dodajemy funkcję, która po załadowaniu strony:

— przypisze do zmiennej canvas odwołanie do płótna.

— przypisze do zmiennej canvasContext2D odwołanie do mechanizmu pozwalającego na rysowanie pikseli w trybie 2D.

— przypisze do zmiennej image odwołanie do wczytanego obrazu z logiem HTML5.

— narysuje obraz z zmiennej image na płótnie przy użyciu odwołania w zmiennej canvasContext2D.

window.onload = function() {

var canvas = document.getElementById("transformArea");

var canvasContext2D = canvas.getContext("2d");

var image = document.getElementById("html5Logo");

canvasContext2D.drawImage(image, 0, 0);

};

Po zapisaniu pliku i odświeżeniu zawartości przeglądarki powinniśmy zobaczyć następujący efekt:

image

Ostatni krok to dodanie kodu, który spowoduje zmianę kolorów drugiego obrazka, musimy wykonać następujące operacje:

— tworzymy zmienną imageContext, do której wczytujemy z zmiennej canvasContext2D (nasze płótno, na którym przed chwilą narysowaliśmy kopię loga) zawartość od punktu 0,0 do punktu 500,300.

— tworzymy zmienną imagePixels, do której wczytujemy piksele z imageContext.

— każdy punkt jest reprezentowany przez 4 składowe czyli kolor czerwony, zielony, niebieski i kanał alfa. Tworzymy pętle, która zważając na tą informacje będzie miała przeskok co 4 elementy. Pętla będzie odpowiedzialna za zastosowanie wzoru na zamianę kolorów.

— w pętli tworzymy zmienną grayscale, która będzie posiadała przeliczoną wartość dla każdego koloru.

— przypisujemy zmienną grayscale do odpowiednich składowych piksela.

— po wyjściu z pętli rysujemy na płótnie (zmienna canvasContext2D) przekształcone piksele zaczynając od punktu 0,0. Piksele będą rysowane do punktu 500,300 zgodnie z wielkością zmiennej imageContext.

var imageContext = canvasContext2D.getImageData(0, 0, 500, 300);

var imagePixels = imageContext.data;

for (var i = 0, n = imagePixels.length; i < n; i += 4) {

var grayscale = imagePixels[i ] * .3

+ imagePixels[i+1] * .59

+ imagePixels[i+2] * .11;

imagePixels[i ] = grayscale; // czerwony

imagePixels[i+1] = grayscale; // zielony

imagePixels[i+2] = grayscale; // niebieski
}

canvasContext2D.putImageData(imageContext, 0, 0);

Efekt końcowy:

image

Podsumowanie

W artykule został zaprezentowany sposób na zamianę kolorowego obrazka na czarno-biały przy użyciu jednego z wielu dostępnych wzorów matematycznych. Możliwości płótna są o wiele większe niż zamiana kolorów, a najważniejsza nauką wyniesioną z tego artykułu powinna być umiejętność operowania na pikselach i wiadomości dotyczące zapisu pikseli oraz ich elementów składowych.

ITAD SGGW–Windows 8 i HTML5

Podczas konferencji IT Academic Day na SGGW w dniu 23.05 będę opowiadał o HTML5 w ramach systemu Windows 8. Zapraszam wszystkich chętnych – wstęp wolny!

Strona wydarzenia: http://www.newitad.studentlive.pl/itadsggw/Agenda