Как сделать текст картинкой?

Иногда у вебмастеров возникает необходимость "зашифровать" текст в картинку. Другими словами, отобразить на сайте текст картинкой. Спросите, зачем это нужно? Нужно это бывает иногда очень! :) Например, отобразить на сайте телефон картинкой, чтобы он не индексировался как текст и соответственно не находился в поиске. Усекли? Что уже говорить про электронные ящики - существует масса ухищрений, чтобы не писать адрес электронной почты на сайте простым текстом - помимо того, что он станет доступным для поиска, также существует большая вероятность того, что он прочитается роботом в поисковой выдаче, который занесет его в какой-нибудь список для спам-рассылок. Для этих и других целей и существует такая прекрасная возможность, как конвертация текста в картинку. Наверняка вы встречали на сайтах (например, на досках объявлений) адрес или телефон в объявлении почему-то нарисованный, а не написанный. Теперь зная, для чего это делается вебмастерами, может и вы решите следовать моим рекомендациям? Но не рисовать же каждый раз телефон или адрес электронной почты в 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|pochta@mail.ru|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&amp;chld=pinned_c|1|004400|l|Пока+все!|Не+забываем|лайкнуть

В общем, экспериментируйте, "динамичные иконки" могут найти себе самое широкое применение в сайтостроительстве! Загвоздка лишь в фантазии вебмастера!

Оцените материал:
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (7 голоса, рейтинг: 4,86 из 5)
Загрузка...

Вячеслав - типичный интернетчикВячеслав Скоблей (ака files) - типичный интернетчик. Скитаюсь интернетом, пишу на PHP, увлекаюсь созданием веб-сайтов на Wordpress, решаю многочисленные проблемы, которые до появления интернета не существовали...

Специализируюсь на безопасности сайтов: защищаю сайты от атак и взломов, занимаюсь лечением вирусов на сайтах и профилактикой...

Наверняка у Вас есть вопросы, просьбы или пожелания. Не стесняйтесь спросить, я отвечаю всегда быстро...

2 комментарий

  1. сколько же я времени потерял.
    еще когда то наткнулся на эту статью - очень нужно, полезно, даже закладку сделал - а потом как то то поерационка поменялась то браузер - и все не найти в интернете ее...
    запомнил себе "блог обычного интенетчика" - ищу ищу - а оно оказывается мало того что не слово а надпись на картинке так еще и "типичного" интернетчика - ну попробуй найти... а домен вообще seo-zona - попробуй запомнить...
    а искал и защита емейл, и скрыть телефон и что уже только не пробовал - а оказалось пост об Как сделать текст картинкой. так еще и соц кнопок нету что бы себе в контакт или твитер отправить....

    1. Вячеслав Скоблей says:

      Спасибо, Макс. Принял к сведению!

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

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