grindel 15 авг 2012 в 02:36

Bart Chalkboard Generator

5 мин

12K

HTML*JavaScript*Веб-разработка*

Из песочницы

+40

Комментарии 60

SAGAK 15 авг 2012 в 03:10

Привет, 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 15 авг 2012 в 03:10

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

Mushtat 15 авг 2012 в 03:18

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

powder96 15 авг 2012 в 03:39

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

Kukunin 15 авг 2012 в 03:16

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

grindel 15 авг 2012 в 03:22

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

Abdusalamov 15 авг 2012 в 03:22

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

grindel 15 авг 2012 в 03:25

Точно

НЛО прилетело и опубликовало эту надпись здесь

feofan 15 авг 2012 в 10:20

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

romanshuvalov 15 авг 2012 в 08:11

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

chilly 15 авг 2012 в 09:01

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

vvzvlad 15 авг 2012 в 09:13

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

grindel 15 авг 2012 в 16:33

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

vvzvlad 15 авг 2012 в 17:18

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

grindel 15 авг 2012 в 16:31

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

tagir_valeev 15 авг 2012 в 10:04

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

silvansky 15 авг 2012 в 10:26

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

sergiks 15 авг 2012 в 10:36

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

grindel 15 авг 2012 в 17:48

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

sergiks 15 авг 2012 в 20:49

Похож на Times

ZiggiPop 15 авг 2012 в 23:05

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

Sonar 15 авг 2012 в 10:37

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

leshaogonkov 15 авг 2012 в 10:39

Подтверждаю

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

kinguru 15 авг 2012 в 11:28

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

bighouse 16 авг 2012 в 12:29

kinguru 16 авг 2012 в 12:34

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

kinguru 15 авг 2012 в 11:35

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

vladvoron 15 авг 2012 в 12:14

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

grindel 15 авг 2012 в 17:34

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

powder96 15 авг 2012 в 19:00

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

grindel 16 авг 2012 в 20:27

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

powder96 16 авг 2012 в 20:48

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

grindel 16 авг 2012 в 21:59

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

powder96 16 авг 2012 в 22:22

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

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

Funcraft 15 авг 2012 в 12:26

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

s4z 15 авг 2012 в 12:41

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

wise_gopher 15 авг 2012 в 12:56

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

anmi 15 авг 2012 в 14:40

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

Adiost 15 авг 2012 в 20:15

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

powder96 15 авг 2012 в 20:22

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

Adiost 15 авг 2012 в 20:47

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

Anton_Gorodezkiy 15 авг 2012 в 15:05

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

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

grindel 15 авг 2012 в 17:36

ок)

powder96 15 авг 2012 в 19:01

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

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

grindel 15 авг 2012 в 19:08

И всего-то?

powder96 15 авг 2012 в 19:14

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

powder96 16 авг 2012 в 19:49

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

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

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

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

lahmatiy 17 авг 2012 в 15:53

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

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

grindel 18 авг 2012 в 01:43

Нет не проще)

grindel 2 сен 2012 в 21:00

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

powder96 2 сен 2012 в 22:48

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

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

Anton_Gorodezkiy 23 авг 2012 в 15:36

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

eno_one 27 авг 2012 в 14:22

класс))

feofan 3 сен 2012 в 00:03

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

powder96 3 сен 2012 в 01:54

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

grindel 3 сен 2012 в 23:16

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

Kaputmaher 27 окт 2014 в 15:18

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

gymlyg 17 ноя 2014 в 14:24

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

Зарегистрируйтесь на Хабре, чтобы оставить комментарий