Иногда требуется сделать картинку или надпись из текста (другими словами из букв). Для этого можно воспользоваться приемом, описанным в этой статье.
Для начала вам необходимо подключить jquery (если он у вас до сих пор не подключен на сайте). Для этого можно использовать, например, вариант приведенный ниже. Как использовать
На следующем шаге подключите плагин, который собственно и выполняет прорисовку. Смотрите код ниже.
Следующий шаг : запуск плагина с параметром
: image_src — ссылка на картинку*. Этот парметр обязателен.
Генерируем текст на основе изображения. При изменении размеров блока с текстом — вызвать pictotxt еще раз.
Параметры
Требования
Работает во всех браузерах с поддержкой canvas, при большом количестве буковок может призадуматься.
Скачать плагин pictotxt ↓
Пример
Для начала вам необходимо подключить jquery (если он у вас до сих пор не подключен на сайте). Для этого можно использовать, например, вариант приведенный ниже. Как использовать
<script type="text/javascript"
src=" https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
На следующем шаге подключите плагин, который собственно и выполняет прорисовку. Смотрите код ниже.
<script type="text/javascript" src="jquery.pictotxt.js"></script>
$(function(){
$(".text_image").pictotxt({image_src: 'text_bg.jpg'});
});
Генерируем текст на основе изображения. При изменении размеров блока с текстом — вызвать pictotxt еще раз.
Параметры
| Опция | Описание |
| imagesrc | ссылка на картинку, со своего домена, *иначе: Security error" code: «1000, SECURITY_ERR: DOM Exception 18, etc. |
| filltype | Заливка текста картинкой: repeat — замостить область текста no-repeat — не повторять фон stretch — рястянуть по ширине\высоте области текста |
| invert | инвертировать цвет букв относительно картинки, принимает true/false |
| show_img | показывать картинку фоном под текстом, принимает true/false |
Требования
Работает во всех браузерах с поддержкой canvas, при большом количестве буковок может призадуматься.
Скачать плагин pictotxt ↓
Здесь можно, например, использовать список ключевых слов или рекламный текст, который вам необходимо разместить на вашей странице. Или любой другой текст. Этот текст не будет виден или будет виден некотрое время, пока скрипт будет прорисовывать ваше изображение. Этот текст можно увидеть, если выделить текстовую зону. Недостаток скрипта в том, что при большом количестве букв, просисовка может занять некоторое время. При креативном подходе это можно использовать для достижения определенных целей. Еще один недостаток: надо повозиться с настройками, количеством текста и самой картинкой, чтобы все выглядело красиво. Наверное, не стоит использовать этот эффект на главных страницах сайтов, так как грузится все это приличное время. Еще один недостаток - настраивать надо сам скрипт, а это не совсем удобно, когда надо например на странице сделать два таких текстовых изображения. Комбинация различных настроек может обеспечить совсем разные эффекты.
Вход
Добавить
