Реализация онлайн-просмотра шрифтов. Нужна помощь!

Тема в разделе "JavaScript", создана пользователем axle_vega, 5 янв 2014.

  1. axle_vega

    axle_vega

    Регистрация:
    5 янв 2014
    Сообщения:
    0
    Симпатии:
    0
    У меня сайт с дополнениями к photoshop, среди них имеются шрифты.
    Хочу добавить возможность вводить любой текст и смотреть, как он будет выглядеть.

    Вот пример такого сервиса: http://ru.fontriver.com/font/edmundsbury_serif (там есть вкладка Тест-драйв, в которой мы можем ввести любой текст и увидеть, как он выглядит с данным шрифтом).

    Загуглил и ничего не нашел (

    Подскажите, это просто скрипт или что-то более глобальное? можно ли поставить такой сервис на сайт бесплатно и т.д.?
     
  2. web2us

    web2us

    Регистрация:
    10 мар 2013
    Сообщения:
    0
    Симпатии:
    0
    это подгрузка данного шрифта и его вывод, можно сделать на css а можно сделать графически на сервере и аяксом отдать... любой метод имеет право на жизнь
     
  3. axle_vega

    axle_vega

    Регистрация:
    5 янв 2014
    Сообщения:
    0
    Симпатии:
    0
    Я сделал следующее:

    Нашел одну вещь, typeface называется. Что-то вроде cufon.
    Все было хорошо, пока дело не дошло до изменения текста в поле.
    Вот здесь результат работы: http://digmast.ru/new-fontz/new-giger

    Всё классно, если не менять текст в поле :Smile: А это главный момент в задаче.

    Вот основной код:

    HTML:
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="js/typeface-0.15.js"></script>
    </head>
    
    <body>
    <script type="text/javascript">
    function changeText2(){
    var userInput = document.getElementById('userInput').value;
    document.getElementById('boldStuff2').innerHTML = userInput;
    }
    </script>
    
    <script type="text/javascript" src="js/a_avantetitulinline_regular.typeface.js"></script>
    
    <script type="text/javascript">
    function doClear(theText) { if (theText.value == theText.defaultValue) { theText.value = "" } }
    function doDefault(theText) { if (theText.value == "") { theText.value = theText.defaultValue } }
    </script>
    
    
    <div>
        <div id="boldStuff2" class="typeface-js" style="font-family: a_AvanteTitulInline; font-size:60px">
            <p class="typeface-js" style="font-family: a_AvanteTitulInline; font-size:60px;" id="boldStuff2">Digmast</p>
        </div>
        <div>
            <form onsubmit="changeText2(); return false;">
                <input type="text" id="userInput" value="Введите текст" onFocus="doClear(this)" onBlur="doDefault(this)"/>
                <input type="submit" value="Проверить"/>
            </form>
        </div>
    </div>
    
    
    </body>
    
    </html>
    По итогу получается, что при submit class="typeface-js" не применяется к новому тексту, вместо этого выводит текст с простым шрифтом.

    Как это исправить?
     
  4. web2us

    web2us

    Регистрация:
    10 мар 2013
    Сообщения:
    0
    Симпатии:
    0
    зачем такой геморой, сделайте через аякс, на стороне сервера обработайте
     
  5. axle_vega

    axle_vega

    Регистрация:
    5 янв 2014
    Сообщения:
    0
    Симпатии:
    0
    не знаю, как через аякс сделать
     
  6. web2us

    web2us

    Регистрация:
    10 мар 2013
    Сообщения:
    0
    Симпатии:
    0
    создаешь файл your_php_file_path.php
    PHP:
    //creates a image handle
    $img imagecreate200200 );
    //choose a bg color, u can play with the rgb values
    $background imagecolorallocate$img,2320135 );
    //chooses the text color
    $text_colour imagecolorallocate$img255255255 );
    //sets the thickness/bolness of the line
    imagesetthickness $img);
    //draws a line  params are (imgres,x1,y1,x2,y2,color)
    imageline$img20130165130$text_colour );
    //pulls the value passed in the URL
    $text $_GET['text'];
    $text_font $_GET['text_font'];
    // place the font file in the same dir level as the php file
    if(!empty($text_font)){ $font $text_font; }else
    $font 'fontsDir/comic.ttf';
    //this function sets the font size, places to the co-ords
    imagettftext($img100011120$text_colour$font$text);
    //places another text with smaller size
    imagettftext($img16010160$text_colour$font'Small Text');
    //alerts the browser abt the type of content i.e. png image
    header'Content-type: image/png' );
    //now creates the image
    imagepng$img );
    //destroys used resources
    imagecolordeallocate$text_color );
    imagecolordeallocate$background );
    imagedestroy$img ); 
    потом этот файл загружаешь
    HTML:
    <img id='text' src='your_php_file_path.php' />
    <a href="#" id="refresh">Refresh text</a>
    <script>
    $('#refresh').click(function(){
       $('#text').attr({
           src:'your_php_file_path.php?text_font=arial.ttf&text=tut-prosto-text',
       });
    });
    </script>
    этого хватит что бы на мысль навести и немного модифицировав получить нужный результат с картинкой
    если нужен через джаваскрипт - в лс, если надо полностью под нужны - в лс