Иногда у вебмастеров возникает необходимость "зашифровать" текст в картинку. Другими словами, отобразить на сайте текст картинкой. Спросите, зачем это нужно? Нужно это бывает иногда очень! :) Например, отобразить на сайте телефон картинкой, чтобы он не индексировался как текст и соответственно не находился в поиске. Усекли? Что уже говорить про электронные ящики - существует масса ухищрений, чтобы не писать адрес электронной почты на сайте простым текстом - помимо того, что он станет доступным для поиска, также существует большая вероятность того, что он прочитается роботом в поисковой выдаче, который занесет его в какой-нибудь список для спам-рассылок. Для этих и других целей и существует такая прекрасная возможность, как конвертация текста в картинку. Наверняка вы встречали на сайтах (например, на досках объявлений) адрес или телефон в объявлении почему-то нарисованный, а не написанный. Теперь зная, для чего это делается вебмастерами, может и вы решите следовать моим рекомендациям? Но не рисовать же каждый раз телефон или адрес электронной почты в Paint или Photoshop! Как это делать программно и на лету?
Рисуем текст картинкой
Не напрягаясь в изучении графических библиотек, можно воспользоваться помощью сторонних сервисов. Мы рассмотрим работу с "Динамическими иконками" (Dynamic Icons) от Google. Эти инструменты, благодаря широкой палитре используемых параметров, позволяют не просто нарисовать текстом, но и смоделировать полноценные графические информеры для разных нужд вебмастеров (нарисовать, например Тиц, PR или другие параметры для сайта). Вы можете создавать множество интересных маркеров, сносок и информеров, которые очень легко встраиваются на страницы ваших сайтов. Синтаксис построения таких "динамичных иконок" очень простой: После корневого пути https://chart.googleapis.com/chart? передаются параметры и свойста (они описаны на странице с документацией по указанной ниже ссылке) для построения картинки. В свою очередь этот код встраивается в код вызова картинки в html (<img src="код" alt=""/>) и текст картинкой собственно готов!
Адрес, телефон и Email картинкой
Наиболее уязвимые в интернете данные - почтовый адрес, телефон и адрес электронной почты. По сути, это конфиденциальная информация, она собирается в Интернете различными роботами-пауками и в дальнейшем используется в различных целях, зачастую для спама. Превратить такую информацию в картинку достаточно легко:
https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=phone|bbT|7(914)78-98-7673|FFFFFF|000000
результат:
https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=glyphish_envelope|bbT|[email protected]|FFFFFF|000000
результат:
https://chart.googleapis.com/chart?chst=d_bubble_icon_text_small&chld=glyphish_house|bbT|Москва,+ул.Васильковская,+12/3|FFFFFF|000000
результат: Как видим из приведенных кодов, все что идет после "chart?" является параметрами, с полным их перечнем можно ознакомиться на странице документации "динамичных иконок". Для наглядности я выделил красным параметр - иконка, которая стоит перед текстом, иконку можно вставить на выбор из числа предложенных, достаточно прописать ее имя:
И напоследок примерчик:
https://chart.googleapis.com/chart?chst=d_fnote_title&chld=pinned_c|1|004400|l|Пока+все!|Не+забываем|лайкнуть
В общем, экспериментируйте, "динамичные иконки" могут найти себе самое широкое применение в сайтостроительстве! Загвоздка лишь в фантазии вебмастера!
сколько же я времени потерял.
еще когда то наткнулся на эту статью - очень нужно, полезно, даже закладку сделал - а потом как то то поерационка поменялась то браузер - и все не найти в интернете ее...
запомнил себе "блог обычного интенетчика" - ищу ищу - а оно оказывается мало того что не слово а надпись на картинке так еще и "типичного" интернетчика - ну попробуй найти... а домен вообще seo-zona - попробуй запомнить...
а искал и защита емейл, и скрыть телефон и что уже только не пробовал - а оказалось пост об Как сделать текст картинкой. так еще и соц кнопок нету что бы себе в контакт или твитер отправить....
Спасибо, Макс. Принял к сведению!