Случайно появилась идея каким образом реализовать вывод изображения каптчи.
Возможно такой метод уже кто-то реализовал, не знаю.
Суть заключается в том чтобы выводить изображение не с помощью тега «img», а допустим с помошью «div» используя стили, а именно свойство background, но это не все. Background дает нам возможность повторять изображение, следовательно можно создать такое изображение, которое при единичном выводе не несло бы смысла, а при повторении получалось изображение, которое человек мог бы распознать.
Вообщем, лучше приведу пример.
За исходное изображении возьму каптчу с Яндекса:
Теперь отредактируем изображение, а именно, разрежем его на две половинки и поменяем их местами, вот что получмлось:
Хотя не обязательно таким образом резать картинку, это зависит от того как вы будете использовать стили.
А теперь код:
Если этот код вставить на страничку, то получим изображение аналогичное второй картинке.
Нам же нужно получить нормальное изображение, которое мог бы распознать человек, поэтому кое-что добавляем и получаем:
В результате получим картинку идентичную оригинальному изображению.
Это самый простой способ реализации данной идеи, можно дальше поразмыслить.
А вот немного другая идея посложнее в реализации, но наверно тоже интересная:
Допустим выводить изображение и часть его перекрывать изображением цветом фона, человек распознает только видимую часть каптчи, а робот распознает все изображение и следовательно не сможет пройти проверку.
Возможно такой метод уже кто-то реализовал, не знаю.
Суть заключается в том чтобы выводить изображение не с помощью тега «img», а допустим с помошью «div» используя стили, а именно свойство background, но это не все. Background дает нам возможность повторять изображение, следовательно можно создать такое изображение, которое при единичном выводе не несло бы смысла, а при повторении получалось изображение, которое человек мог бы распознать.
Вообщем, лучше приведу пример.
За исходное изображении возьму каптчу с Яндекса:
Теперь отредактируем изображение, а именно, разрежем его на две половинки и поменяем их местами, вот что получмлось:
Хотя не обязательно таким образом резать картинку, это зависит от того как вы будете использовать стили.
А теперь код:
<div style="background: url('captcha.png'); height: 60px; width: 200px"> </div>Если этот код вставить на страничку, то получим изображение аналогичное второй картинке.
Нам же нужно получить нормальное изображение, которое мог бы распознать человек, поэтому кое-что добавляем и получаем:
<div style="background: url('captcha.png') -100px repeat-x; height: 60px; width: 200px"> </div>В результате получим картинку идентичную оригинальному изображению.
Это самый простой способ реализации данной идеи, можно дальше поразмыслить.
А вот немного другая идея посложнее в реализации, но наверно тоже интересная:
Допустим выводить изображение и часть его перекрывать изображением цветом фона, человек распознает только видимую часть каптчи, а робот распознает все изображение и следовательно не сможет пройти проверку.