Bart Chalkboard Generator

[SAGAK]

Привет, grindel! Привет, grindel! Привет, grindel! Привет, grindel!
Привет, grindel! Привет, grindel! Привет, grindel! Привет, grindel!
Привет, grindel! Привет, grindel! Привет, grindel! Привет, grindel!
Привет, grindel! Привет, grindel! Привет, grindel! Привет, grindel!
Привет, grindel! Привет, grindel! Привет, grindel! Привет, grindel!
Привет, grindel! Привет, grindel! Привет, grindel! Привет, grindel!
Вполне неплохая статья. Вполне неплохая статья. Ну, вы поняли.

[Abdusalamov]

> Грузится не очень быстро
Вообще не грузится :(

[Mushtat]

Ну, у меня секунд за 7 загрузилось

[powder96]

Конкретно этот сервис можно опубликовать на любом хостинге. Я понимаю, что свой сервер — это интересно, но все-таки лучше выложить его в нормальное место. Github в качестве хостинга Вам вполне подойдет.

[Kukunin]

А почему не на чистом DOM? Три элемента — доска, текст и барт. Работало бы быстро.
Основная задача сводилась бы к формированию блока с текстом, но рендеринг был бы на браузере.

[grindel]

Ради изучения canvas, других идей не было.

[Abdusalamov]

Я думаю, все дело в фиче «Скачать» :) Или прокачка нового скилла.

[grindel]

Точно

[feofan]

фф 15.0 бета отключил NoScript и всё очень шустренько загрузилось :)

[romanshuvalov]

Мысли вслух: было бы здорово сделать сервис, который по запросу вида «bart.png?text=...» выдавал бы такую картинку с текстом, указанным в запросе.

[chilly]

да и чтоб текст в ссылке был в каком — нибудь base64 интриги ради

[vvzvlad]

можно писать в базу и передавать только номер текста

[grindel]

В смысле сохранять на сайте в базе строчку а потом просто вывавать её номер?

[vvzvlad]

ага. и текст скрыть, и ссылка короткая будет.

[grindel]

Я над этим собираюсь работать, для это го же PHP нужен.

[tagir_valeev]

Сколько констант в коде! Отделить код от данных не пробовали? А ещё под виндой и под линуксом проверяли (с разными наборами шрифтов)? Столько эмпирической магии могут легко дать сбой, если шрифт заменить…

[silvansky]

В MacOSX/FF шрифт не правильный.

[sergiks]

То же: OS X 10.8, FF 14.0.1 (плюсовать коммент не могу)

[grindel]

К сожалению есть возможность тестить только с Ipod Touch, на нём работает.
А какой шрифт?

[sergiks]

Похож на Times

[ZiggiPop]

У меня та же самая фигня на ФФ14.0.1 под ХР. :(

[Sonar]

Ubuntu 12.04 / FF — полёт нормальный.

[leshaogonkov]

Подтверждаю

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:14.0) Gecko/20100101 Firefox/14.0.1

[kinguru]

Не впечатлило. Я думал он будет реально ходить и писать это мелом на доске.

[bighouse]

[kinguru]

Да, вроде как этот колобок — он впечатляет больше :)

[kinguru]

Намного проще и надежней реализовать то же самое на стороне сервера.
Основная надежда лично у меня на HTML5 — это облегчение и упрощение верстки, воспроизведение видео и аудио одинаково на всех устройствах (к сожалению пока нет), более продвинутые формы.

[vladvoron]

И еще ссылка на получившееся изображение занимает порядка двух страниц текста. Я тут сваял быстренько кое-какую сентиментальную чепуху, попробовал отправить жене в скайп. Получилась стена кракозябр, причем как гиперссылка не работающая.

[grindel]

Из Canvas очень тяжело выташить нормальную картинку, нужно юзать PHP.
Думаю сделать bart.grindel.su/?text=text

[powder96]

На PHP все это будет немного сложнее, в первую очередь из-за того, что там не так просто рисовать текст.

[grindel]

Имеется в виду что картинка отправляется на сервер, там форматируется и возвращается клиенту

[powder96]

Ну, чтобы картинка формировалась на сервере, нужно переписать весь скрипт на PHP. А там сложнее рисовать текст. Посмотрите на вот эти функции: imageTTFText(), imageTTFBBox(), imageFTText() и imageFTBBox().

[grindel]

>форматируется

[powder96]

А, не заметил. Т.е. при запросе bart.grindel.su/?text выдается главная страница с уже вбитым текстом, правильно? Тогда для _учебного_ проекта можно сделать так:

<script type="text/javascript">
    var text = <?php echo '\'' . addslashes($_SERVER['QUERY_STRING']) . '\''; ?>;
</script>

[Funcraft]

Забавный сервис. Спасибо (:

[s4z]

Эх, где Вы раньше были? :)
Как-то нужно было сделать картинку для статьи, так пришлось самому в Photoshop делать.
За сервис отдельное спасибо!

[wise_gopher]

>> Опробовать можно сдесь
Ну вы понЕли

[anmi]

Если честно, машинное написание подобно ручному выглядит не очень хорошо ввиду того что одинаковые буквы имеют идентичное написание, что выглядит крайне неестественно.
Лучше когда в наборе шрифта по 5-10 начертаний одной буквы, из которых происходит выбор произвольно.

[Adiost]

Подобная задача совершенно нетривиальна. В свое время мне ее как раз приходилось решать.
Нарисовал по 10 вариантов каждого символа на планшете, обработал и сделал читаемыми.
Далее сделал три варианта реализации:
— Создал 10 гарнитур шрифтов, написал скрипт, который принимал String и выводил HTML-код с этим самым String, но для каждой буквы выбиралась рандомная гарнитура.
— Создал 10 гарнитур шрифтов и на PHP написал скрипт, выбирающий для каждой буквы случайную гарнитуру и отрисовывающий все это дело на изображение.
— Для каждой буквы сделал полупрозрачный PNG 128x128, JS скрипт превращал String в набор , выбирая случайный вариант для каждой буквы.
Самым неоптимальным, но при этом самым гибким вариантом оказался первый. В итоге я использовал второй вариант, нагрузка лишняя конечно была, но зато у всех все отображалось правильно.
Третий лагал жутко, сразу нет.

[powder96]

Можно попробывать нарисовать текст на отдельном изображении, несильно его исказить (как в капче) и наложить картинку на «доску». Главное подобрать правильные искажения. Вот очень хорошая статья на эту тему: habrahabr.ru/post/138668/

[Adiost]

Звучит хорошо, но на деле совершенно плохой вариант. Символы будут выглядеть по-разному, бесспорно, но вот неестественности только прибавится.
Вообще, могу топик написать про множество самых разных вариантов решения такой задачи.

[Anton_Gorodezkiy]

Спасибо за сервис, уже знаю на ком буду применять)

PS очень подробно комментирован код, не упускайте этой особенности при написании будущих статей

[grindel]

ок)

[powder96]

Не плохо бы сделать вытаскивание текста из Fragment Identifier. Т.е, чтобы при посещении bart.grindel.su/#text-text-text открывалась странца с уже вставленным текстом.

// JavaScript
if(window.location.hash != '')
    var text = window.location.hash.substring(1);
else
    var text = '';

[grindel]

И всего-то?

[powder96]

Да, это гораздо проще портирования на PHP.

[powder96]

Еще: проверка на отсутствие текста не совсем правильная.

if (text.length == 0 || text === ' '){
	text = 'ничего';
};

Она работает только тогда, когда текст это только один пробел, или когда текста нет совсем. Она не сработает, если текстом будут два или три пробела. На мой взляд лучше убрать _все_ пробелы из текста, и посмотреть, осталось ли там что-нибудь.

if(text.replace(/\s/g, '').length == 0)
	text = 'Я не знаю, что написать!';

[lahmatiy]

да уж… не проще ли:

if (/\S/.test(text))
    text = 'Я не знаю, что написать!'

[grindel]

Нет не проще)

[grindel]

Беру свои слова назад!

[powder96]

Да, таки проще. Только условие нужно инвертировать и все будет работать:

if(!(/\S/.test(text)))
	text = 'Я не знаю, что написать!';

[Anton_Gorodezkiy]

Было бы не лишним подправить ссылку в посте bart.grindel.su www.bart-gen.ru ;)

[eno_one]

класс))

[feofan]

Что за жуть в адресе, если нажимаешь на «Скачать» %)

[powder96]

Это Data URI содержимого canvas'a, в котором рисуется картинка.

[grindel]

Из поста
«Сохранение картинки
Для сохранения картинки я воспользовался toDataURL('image/png'). Просто открываю новое окно с url canvas.toDataURL('image/png')»

[Kaputmaher]

Сервис мертв?

[gymlyg]

По видимому — да. Но инструкция есть — попробую повторить с благодарностью авторам идеи, если они, конечно, не против.