Авторизация

Вы можете войти через одну из учетных записей:

ИЛИ



Напомнить пароль
Регистрация

Web DeveloperТекст из картинки

Понадобилось для одного проекта сделать текст с цветами букв из нужной картинки. Делать все из картинок было бы неправильно, да и текст поисковиками пусть лучше обрабатывается. Нужного плагина не нашлось и было интересно написать свой.

Вкратце


Демо 1 | Демо 2.
Как использовать

<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>


Запускаем плагин, с обязательным параметром: image_src — ссылка на картинку*.

$(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 ↓
  • +1
  • android
  • 26 декабря 2010, 16:05
  • add twitter 

Комментарии (0) Вконтакте (0) facebook (0)

Комментарии (0)

rss свернуть / развернуть

Только авторизованные пользователи могут оставлять комментарии. Авторизуйтесь, пожалуйста.