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

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

    Вкратце
    Текст из картинки, jQuery плагин 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 ↓

    UPD: Обновил плагин (v1.1), повысилась скорость отрисовки текста.
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 34

      –6
      Ошибка. Ссылка не работает.
        –7
        Вообщем я или застал ваше перелинкование или что-то странное у вас на сайте.
        Кликнул первый раз:


        Кликнул второй раз:

        +2
        Спасибо! поправил.
        +15
        Просто офигенно. Правда не знаю зачем бы можно было использовать, но круто — факт.
          +2
          if lynx in user_agent:
              jquery_out += """$(".text_image").pictotxt({image_src: 'logo.jpg'});"""

          if («lynx» == strtolower($useragent))
          {
              echo "$(\".text_image\").pictotxt({image_src: 'text_bg.jpg'});";
          }

          /etc && /etd
            0
            ага, канвас в lynx
              0
              а разве там и js работает?
              это шутка была :)
              я сам не понимаю для чего сабж нужен
          +6
          Шикарный плагин сразу вспоминается портрет Моны Лизы в текстовом режиме, так любимый IT-шниками 80-х годов
            +2
            У меня комп немного захлёбывается…
            А в остальном — блеск :)
              +1
              А в самом посте картинка из текста =)
                –4
                толсто!
                +4
                попробуйте объединять группы букв подряд с одним цветом в один span, браузеру будет легче.
                  +2
                  Переделайте алгоритм, то, что сейчас есть лаг на лаге. Или хотя бы скройте блок (через visibility) во время покраски.
                  Для каждой буквы двойное определения её положения (основной источник лагов) эта операция вообще не желательна, а у вас их целых количество_букв x 2
                  l_left = parseInt($(this).position().left);
                  l_top = parseInt($(this).position().top);
                  
                  В идеале нужно все отрисовать в памяти (цвета, спаны) и 1 раз вставить html без последующего изменения.
                    +1
                    Большое Спасибо что показываете недочеты и предлагаете как их устранить, повторное определение координат подправил. Отрисовку в памяти подумаю как лучше реализовать.
                  +4
                  забавно ведет себя при изменении масштаба
                    +1
                    Может не «текст из картинки», а «картинка из текста»?
                      +1
                      Изумительно! Первая демка весьма впечатляет.
                        +1
                        Здорово! Хотел на досуге как нибудь реализовать нечто немного другое, но очень похожее, у меня даже есть идея для чего подобное использовать, но вы меня опередили. Реализация шикарная. Хотя конечно для большей чёткости надо бы картинки побольше, но тогда браузеру совсем плохо будет.
                        В любом случае это круто!
                        • UFO just landed and posted this here
                            0
                            … да и текст поисковиками пусть лучше обрабатывается


                            Вот тут стоит быть аккуратнее, имхо. Поисковики не любят текст, цвет которого сливается фоном (как во второй демке).
                              +1
                              Еще б на баше такую штуку, чтобы в логон вставить можно было :D
                                0
                                a MPlayer с TextOutput(точно не помню) не пойдет?
                                _знаю_, что для Mplayer'а точно есть рендерер, который в консоль может выводить ASCII-картинки, даже в движении
                                0
                                теперь и картинки со вкусом сео-текстов!
                                  –2

                                  Кому-то кажется, что это похоже на лого Хабрахабра?
                                    0
                                    Для сравнения
                                      0
                                      Старый приём фотографов — глядя на фотографию, попробуйте расфокусировать зрение и увидите, какие детали бросаются в глаза.
                                      Попробуйте применить это к лого и увидите сходство :)

                                      ну и ёлки-палки, это же текст, а не кисти фотошопа :D
                                      –2
                                      занятно, но причем тут поисковики не понял — на выходе получается ascii-art, а не текст, ведь
                                        0
                                        CTRL+MOUSWHEELUP, затем выдели текст и читай.
                                        +2
                                        не сочтите занудством, но если исправить

                                        pictotxt -> picToTxt
                                        image_src -> imageSrc

                                        и т.д., было бы более по-джаваскриптному

                                        P.S. сам эффект потрясающий!
                                          0
                                          шикарно, круто.
                                          не читабельно, долго

                                          (5/5)
                                            0
                                            Чтобы не было сильных тормозов — идущие подряд элементы SPAN с одинаковыми цветами неплохо было бы оптимизировать — обернуть из содержимое в один элемент.

                                            Будет заметно быстрее.
                                              0
                                              Вторую демку не грузит у меня по причине захлебывания в яваскрипте.

                                              Firefox 3.6.13, Ubuntu 10.04
                                              Сценарий: tops.net.ua/jquery_pictotxt/js/jquery.min.js:24

                                              Only users with full accounts can post comments. Log in, please.