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

Демо 1 | Демо 2.
Как использовать
Запускаем плагин, с обязательным параметром: image_src — ссылка на картинку*.
Получаем текст из нашей картинки. При изменении размеров блока с текстом — вызвать pictotxt еще раз.
Параметры
Требования
Работает во всех браузерах с поддержкой canvas, при большом количестве буковок может призадуматься.
Скачать плагин pictotxt ↓
Вкратце

Демо 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
Комментарии (0)
rss свернуть / развернутьТолько авторизованные пользователи могут оставлять комментарии. Авторизуйтесь, пожалуйста.