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

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

Вкратце


Демо 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 ↓

UPD: Обновил плагин (v1.1), повысилась скорость отрисовки текста.