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

Вкратце


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