ASCII-каптча, каптча псевдографикой. Часть I.

Сегодня будем рисовать каптчу. Причем не с помощью стандартных библиотек вывода графики (таких мануалов в сети более чем достаточно), а каптчу, отображаемую пользователю в виде псевдографики, т.е. изображения символов каптчи будут созданы из обычных числовых и буквенных символов. Для упрощения задачи примем следующее:

— В качестве символов, из которых будет создаваться изображение, будем использовать латинские буквы, цифры и знаки препинания. Можно, конечно, и китайскими иероглифами пользоваться, но не факт что пользователь сможет каптчу распознать и она у него не «поплывет».
— Сам код каптчи будет состоять только из цифр (ну вот лень мне было заморачиваться с буквами в ASCII-арт).

Плюсы:
+ Скрипт легко встраивается как медведевский будильник, в разные места в любое место, где нужна каптча.
+ Не требует библиотек обработки изображений, дополнительных ранее нарисованных картинок и т.д., соответственно, будет работать даже на самом плохом хостинге, где библиотек типа ImageMagick может вообще не быть
+ Отображается даже в консольном (текстовом) редакторе типа lynx.
+ Почти не тратит трафик (текст же) и ресурсы сервера.

Минусы:

— Довольно легко ее распарсить автоматически, если не применять всякие дополнительные фишки, типа изменения количества строк и столбцов изображения. Их, к сожалению, в этом мануале не будет, но если кто-нибудь захочет вдруг, то я вернусь к этому вопросу.

В части первой займемся рисованием цифр. Конечно, человеку увлекающемуся ASCII-артом это нафиг не надо, можно сразу пропускать и переходить ко второй части. Кто не знает, что такое ASCII-арт вообще, тот может сходить в Википедию или Гугль, и ознакомиться с темой.

Я сам не великий ASCII-сенсей, так что использовал достаточно стандартную методу:

1. В любом простом текстовом редакторе (Блокноте, Notepad++, mcedit или редакторе FAR-а) нарисуем поле размером в X символов и Y строк каким-либо одним символом, например *, -, # или любым другим. Должно получиться что-то типа этого (я взял поле размером 6 x 5 символов):

------
------
------
------
------

2. Далее, нажимаем клавишу Insert, включаем режим замены и заменяем в этом поле символы - на какие-нибудь другие, так, чтобы получилось изображение определенной цифры, например:

-0000-
00--00
00--00
00--00
-0000-

Если кто-то ленивый, то можно поискать готовые цифры в Гугле, взять несколько черновой вариант здесь, готовый, используемый мною вариант здесь. Или можно вообще в последней части статьи скачать сразу весь архив. XD

Итак, у нас есть готовые изображения цифр, осталось лишь записать их в виде, доступном PHP.

Создаем массивы, содержащие псевдографические изображения цифр. Здесь и далее условимся, что в качестве «пустого» символа я использовал *, а в качестве символа для изображения цифры, знак $.

//массивы, с символьными строчками, отображающими цифры
//0
$num0=array("*$$$$*","$$**$$","$$**$$","$$**$$","*$$$$*");
//1
$num1=array("**$$**","*$$$**","$*$$**","**$$**","$$$$$$");
//2
$num2=array("*$$$$*","$$**$$","***$$*","**$$**","$$$$$$");
//3
$num3=array("*$$$$*","$$**$$","***$$*","$$**$$","*$$$$*");
//4
$num4=array("$$**$$","$$**$$","$$$$$$","****$$","****$$");
//5
$num5=array("$$$$$$","$$****","$$$$$*","****$$","$$$$$*");
//6
$num6=array("*$$$$$","$$****","$$$$$*","$$**$$","*$$$$*");
//7
$num7=array("$$$$$$","***$$*","**$$**","*$$***","$$****");
//8
$num8=array("*$$$$*","$$**$$","*$$$$*","$$**$$","*$$$$*");
//9
$num9=array("*$$$$$","$$**$$","*$$$$$","****$$","*$$$$*");

Далее, создаем массив, содержащий псевдографические изображения всех цифр:

//все цифры
$allnum=array($num0,$num1,$num2,$num3,$num4,$num5,$num6,$num7,$num8,$num9);

Конечно, можно было бы сразу создать двумерный массив, и мы бы даже выиграли какой-то процент в оптимизации, но ИМХО, так код менее громоздкий, более удобочитаемый и понятный.

Напоследок, вот вам отладочная функция, чтобы посмотреть, как выводится та или иная цифра на HTML-странице, сгенерированной скриптом:

function gennum($num)
		{
			$ans="";
			for ($i=0; $i<count($num); $i++)
			{
				$ans=$ans.$num[$i]."<br>";
			}
			return $ans;
		}


В качестве параметра ($num) функции передается массив, содержащий изображение цифры (например, $num0), а вывести ее непосредственно на страницу можно так:

$pgn=gennum($num0);
echo ("<pre><code>".$pgn."</code></pre>");

Предупреждение! Нормальное отображение ASCII-графики гарантируется только при использовании моноширинного шрифта (т.е. такого шрифта, в котором все символы одинаковой ширины). Наиболее просто достигнуть этого, обрамив текст в тег <code></code> (если никто над браузером не поиздевался, то содержимое тега <code></code> выводится моноширинным шрифтом).

В следующей части создадим генератор кода каптчи и генератор ее ASCII-изображения.

One Response to ASCII-каптча, каптча псевдографикой. Часть I.

  1. Pingback: ASCII-каптча, каптча псевдографикой. Часть II. В которой генерируется каптча. | Персональный блог Толика Панкова

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*