Сегодня будем рисовать каптчу. Причем не с помощью стандартных библиотек вывода графики (таких мануалов в сети более чем достаточно), а каптчу, отображаемую пользователю в виде псевдографики, т.е. изображения символов каптчи будут созданы из обычных числовых и буквенных символов. Для упрощения задачи примем следующее:
— В качестве символов, из которых будет создаваться изображение, будем использовать латинские буквы, цифры и знаки препинания. Можно, конечно, и китайскими иероглифами пользоваться, но не факт что пользователь сможет каптчу распознать и она у него не «поплывет».
— Сам код каптчи будет состоять только из цифр (ну вот лень мне было заморачиваться с буквами в 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-изображения.
Pingback: ASCII-каптча, каптча псевдографикой. Часть II. В которой генерируется каптча. | Персональный блог Толика Панкова