Skocz do zawartości

[HTML5][JS][PHP] Rysujemy captchę.


sgan
 Udostępnij

Rekomendowane odpowiedzi

Czołgiem!

Patrząc na różne poradniki tutaj stwierdziłem, że muszę dodać "coś od siebie" troszeczkę na innym poziomie, troszeczkę z kosmosu. ;)

Do rzeczy: zajmiemy się dziś "rysowaniem" captchy. Co to jest captcha każdy oczywiście wie, nic innego jak tekst z obrazka do przepisania, jednak nasza nie będzie obrazkiem .jpg czy .png, będzie w całości napisana i tworzona w HTML5, CSS, Javascript oraz PHP.

HTML5 dał nam wiele nowych możliwości, między innymi canvas. Canvas jest to coś w stylu płótna malarskiego, na którym można sobie dowolnie rysować, tudzież pisać. Canvasem operujemy przez Javascript. Może bez zbędnego chranienia(co mam w nawyku) po prostu zacznijmy. ;)

Liczę na to, że każdy potrafi stworzyć podstawowy dokument HTML z sekcjami

oraz .

Nasz canvas będzie miał id "can", więc w sekcji

stwórzmy sobie styl, który da mu ładne obramowanie. :)


OK, teraz pracujemy już tylko na . Stwórzmy sobie element canvas, określmy jego szerokość na 450px, wysokość na 150px, dajmy mu id "can" i od razu zamknijmy.

Oczywiście wszystko co ja tutaj podaję to tylko moje widzimisie, rozmiary, id i tak dalej można dać oczywiście według własnego uznania.
Teraz zacznie się jazda. Cały kod Javascript będziemy pisali w PHP(wtf?). Dlaczego? Po napisaniu całości zmienną z tekstem z obrazka będziemy mieli dostępną od razu od strony PHP, daje nam to troszkę większe możliwości i tak dalej, i tak dalej..
Teraz zachodzi pytanie: Jak pisać w Javascript przez PHP? Proste:
Cały skrypt PHP, który napiszemy jest NAJPIERW interpretowany i wykonywany przez serwer, my widzimy tylko wynik, dlatego też na jakiejkolwiek stronie wciskając Ctrl + U nie widzimy kodu PHP, z drugiej strony Javascript działa po stronie klienta, oznacza to, że widzimy jego kod i to nasza przeglądarka go wykonuje, do rzeczy: prawie wszystko będzie działało po prostu przez 'echo'. :)
Lecimy, najpierw zadajemy sobie pytanie "jakie funkcje czy też możliwości ma mieć nasza captcha?". U mnie będą to:
  • - zmienna z zapisanym tekstem z obrazka - losowe znaki małe, duże oraz cyfry - każdy znak w losowym kolorze - każdy znak napisany losową czcionką
Zaczniemy od początku, czyli zmienna oraz losowe znaki. (oczywiście działamy w pomiędzy znacznikami <?php i ?> !!) Stwórzmy sobie więc pustą zmienną o genialnej nazwie "captcha".
$captcha = '';
Teraz znaki, zacznijmy od otwarcia oraz zamknięcia znacznika
echo '';
Dalej, stwórzmy sobie w JS zmienną o nazwie can, która będzie selektorem naszej captchy. Pobierzemy ją przez metodę "getElementById".
echo 'var can = document.getElementById("can");';
Widzicie jakie to proste? Poprzez echo(PHP) możemy tworzyć skrypt Javascript, nie zapominajcie jednak o tym, że zarówno w PHP jak i Javascript każde polecenie kończy się średnikiem, więc muszą być dwa! Żeby działać na canvas trzeba najpierw pobrać jego treść, jest od tego specjalna metoda, więc stworzymy zmienną "c", która będzie odpowiadała za treść.
echo 'var c = can.getContext("2d");';
Metoda getContext przyjmuje jeden argument, póki co może być to tylko "2d", jednak w internecie jest masa tutoriali o tym jak tworzyć obiekty 3D w canvas. Teraz już wracamy do naszej funkcji captchy, czyli losowe znaki. Chcemy, żeby znaki były w arrayu(tablicy), nie będziemy oczywiście dopisywać do niego po kolei każdego znaku, mamy od tego funkcje range() oraz funkcję array_merge(), która łączy ze sobą tablice.
$alph = array_merge(range('a', 'z'), range('A', 'Z'), range('1', '9'));
W tym momencie w tablica $alph zawiera w sobie małe znaki od "a" do "z", duże znaki od "a" do "z" oraz liczby od 1 do 9. Dalej, co mamy następne? Ah, kolory. Do tego znalazłem dosyć ciekawe rozwiązanie. Najpierw stworzymy tablicę, która będzie zawierała litery od "a" do "f" oraz liczby od 0 do 9.

$colors = array_merge(range('a', 'f'), range('0', '9'));
Tym się zajmiemy dalej przy głównym działaniu, teraz czcionki. Podobnie tworzymy tablicę, tym razem ręcznie wpiszemy jej elementy, które będą niczym innym jak po prostu nazwami kilku podstawowych czionek systemu Windows(z niego większość korzysta).
$fonts = array('Arial', 'Tahoma', 'Georgia', 'Verdana', 'Impact');
Zdaję sobie sprawę z tego, że mogę pisać nieczytelnie lub niezrozumiale, dlatego w razie czego nasz kod aktualnie wygląda tak:

	<?php

		$captcha = '';

		echo '




Teraz główne działanie, czyli po prostu pętla for(). U mnie znaków będzie 8, więc piszę:



[code]for($i = 1; $i < 9; $i++) { }
Od tej pory działamy w pętli. Teraz tak, chcemy, żeby za każdym razem były losowane znaki, kolory oraz czionki, mamy od tego fajną funkcję array_rand(), która zwraca losowy indeks tablicy, stwórzmy więc 3 zmienne z indeksami tablic.
$n = array_rand($alph);

$nc = array_rand($colors);

$nf = array_rand($fonts);
Analogicznie dalej losujemy sobie znak, czcionkę oraz kolor.
$letter = $alph[$n];

$font = $fonts[$nf]; 
Jak możecie się domyśleć, w zmiennej $letter jest losowy znak z tablicy $alph, a w zmiennej $font jest losowa czcionka z tablicy $fonts. Dla kolorów sprawa teoretycznie wygląda bardziej skomplikowanie, jednak jak się bliżej przyjżeć jest to bardzo proste. ;) Kolor będzie zapisany w HEXie, na pewno już widzieliście kolory zapisane tak: #FF0024, jest to po prostu HEX, czyli system szesnastkowy, ale to szczegóły. Kolor w HEXie składa się z krateczki # oraz 6 znaków. Chcemy, żeby każdy z tych sześciu znaków był losowy, mamy tablicę $colors, więc każdy znak będzie po prostu wylosowany z niej.
$color = '#'.$colors[rand(0, 15)].$colors[rand(0, 15)].$colors[rand(0, 15)].$colors[rand(0, 15)].$colors[rand(0, 15)].$colors[rand(0, 15)];
Super! Sporo pracy za nami, zostało już prawie nic. :) Dla zmiennej odpowiadającej za treść "c" używamy metod font(opcje tekstu), fillStyle(kolor tekstu) oraz fillText(wypisanie tekstu).
echo 'c.font = "Bold 30px '.$font.'";';

echo 'c.fillStyle = "'.$color.'";';

echo 'c.fillText("'.$letter.'", 45*'.$i.', '.rand(20, 140).');';
Żeby była jasność: W pierwszym przypadku deklarujemy, że każdy tekst będzie pogrubiony(Bold), będzie miał rozmiar 30px oraz czcionkę ze zmiennej $font, czyli po prostu losową. W drugim przypadku deklarujemy, że kolor tekstu będzie pobierany ze zmiennej $color, czyli również będzie losowy. W trzecim: metoda fillText przyjmuje 3 argumenty: znak, położenie X(poziome) oraz położenie Y(pionowe), znakiem jest zmienna $letter czyli znak losowy, położenie X to 45px pomnożone przez nasze $i z pętli, położenie Y to liczba losowa z zakresu 20-140px. Teraz do zmiennej $captcha dopisujemy każdy znak:
$captcha .= $letter;
Nasza pętla wygląda tak:
for($i = 1; $i < 9; $i++) {

	$n = array_rand($alph);

	$nc = array_rand($colors);

	$nf = array_rand($fonts);

	$letter = $alph[$n];

	$font = $fonts[$nf];

	$color = '#'.$colors[rand(0, 15)].$colors[rand(0, 15)].$colors[rand(0, 15)].$colors[rand(0, 15)].$colors[rand(0, 15)].$colors[rand(0, 15)];

	echo 'c.font = "Bold 30px '.$font.'";';

	echo 'c.fillStyle = "'.$color.'";';

	echo 'c.fillText("'.$letter.'", 45*'.$i.', '.rand(20, 140).');';

	$captcha .= $letter;

}

I gotowe! Nasza captcha narysowana, posiada losowe znaki, kolory, czcionki oraz cały z niej tekst jest zapisany w zmiennej $captcha!

Śmiało możecie wykorzystać ją u siebie, ja raczej pisałem dla czystego treningu canvas. :)

CAŁY kod możecie znaleźć tutaj: http://pastebin.com/wKbccChc

A wynik tutaj: http://skasujto.pl/mgn/captcha.php

I to wszystko.

W razie jakichkolwiek niejasności śmiało piszcie niżej, chętnie pomogę.

Mam nadzieję, że coś takiego może się komuś przydać. Bye! ;)

Odnośnik do komentarza
Udostępnij na innych stronach

Problem wciąż nierozwiązany? Dodaj swoją odpowiedź

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto. Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
 Udostępnij

×