Генератор артов из символов

В этой статье я расскажу о том, как при помощи HTML5 можно сделать простенькое приложение, которое будет генерировать ASCII-арты на основе обычных изображений. Статья ориентирована на тех, кто только начинает свое знакомство с такой замечательной технологией, как HTML5, коим являюсь и я. Профессионалы вряд ли найдут для себя что то новое.

Дело было вечером, делать было нечего

Копался я недавно в интернете в поисках обоев и наткнулся на одно интересное изображение(1.1мб). И меня “зацепила” идея рисовать изображения разноцветными буквами. Порывшись в интернете узнал, что это называется ASCII-art. Ну и конечно же первая мысль: “А запилю ка я приложение, что бы мои любимые обои таким образом нарисовало!”
Сказано — сделано. Есть время, есть желание — почему бы не попробовать.

Было решено реализовывать приложение в браузере. Я давно смотрел на HTML5 и облизывался, да все никак руки не доходили поиграться. А что? Технология модная, перспективная, почему бы не попробовать? Да и проект не сложный, для изучения чего то нового — самое то. На этом и остановился.

Постановка задачи

Приложение должно соответствовать следующим требованиям:

  • наличие двух способов загрузки исходного изображения: через поле выбора файла и перетаскиванием в специальную область (далее будем называть «область приема»);
  • отсутствие сложных настроек. Только самое необходимое: цвет фона, используемый текст и размер шрифта;
  • возможность обработки изображений с прозрачным фоном;
  • работа должна происходить только в браузере, без обращений к серверу и без перезагрузки страницы.

Понятно, что вопрос о поддержке старых браузеров не встает.

Для начала, набросаем html-разметку. Страница приложения делится на три логических части:

Загрузка исходного изображения

Для начала разберем способ загрузки исходного изображения.
Для того, что бы получить доступ к выбранному пользователем файлу, без отправки его она сервер используется класс FileReader . Его метод readAsDataURL() возвращает содержимое файла в виде схемы data:URL. Ну что же, давайте попробуем.

Теперь у нас есть исходное изображение в виде data:URL. Что с ним можно сделать? Его можно использовать в качестве значения атрибута src для изображения. Поэтому давайте покажем пользователю исходное изображение.

Вот, так намного нагляднее. Теперь самое главное: необходимо обработать это изображение.

Настройки

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

Теперь перейдем непосредственно к генерации нашего арта.

Обработка изображения

Весь процесс можно разбить на несколько этапов:

  1. получение данных об исходном изображении. А точнее — нам нужен цвет каждого пикселя;
  2. расчет размеров символов, при помощи которых будет формироваться арт;
  3. расчет цвета каждого символа и его цвета;
  4. непосредственно генерация арта;
  5. представление арта в виде изображения, что бы пользователь мог сохранить плод своих стараний.

Получение данных об исходном изображении

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

Теперь зададим ей такие же размеры, как и у исходного изображения и нанесем это изображение на нее. А затем получим информацию о канве, а как следствие — об исходном изображении.

Метод getImageData() возвращает информацию о канве. Поле data содержит описание каждого пикселя, как раз то, что нам надо.

Читайте также: Съемник ротора генератора 139 qmb

Теперь у нас есть необходимая информация. Вот только представлена она не в самой лучшей форме. Это одномерный массив, где первые четыре элемента описывают первый пиксель (rgba), элементы с пятого по восьмой — второй пиксель и т.д. до конца. Как с таким работать, я слабо представляю. Поэтому давайте приведем эту кучу чисел в человеческий вид.

Теперь мы имеем двумерный массив где каждый пиксель представлен объектом. С ним и будем работать дальше.

Расчет размеров символа

Как получить точный размер символа? Не размер шрифта, а область, которую символ занимает на экране? Что бы не заморачиваться, просто создадим временный span с этим символом и замерим его размер.

Внимательный читатель скорее всего заметил, что учитывается не вся высота символа, а только 80%. Это сделано потому, что видимая часть буквы занимает не всю отводимую ей высоту. Из-за этого на итоговом изображении появляются пустые горизонтальные линии между строчками. Особенно они заметны, если буквы большого размера. Я пристрелялся, так что бы при разных размерах шрифта расстояние между строчками было минимальным — получилось 80%. Так и оставим.

Расчет положения и цвета символов

Теперь необходимо составить “карту символов” — список, содержащий информацию о каждом символе, из которых будет формироваться итоговое изображение. Необходимо знать координаты символа и его цвет.

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

Так же определим функцию, которая будет возвращать очередной символ из введенного пользователем текста. А при достижении конца, начинать сначала.

Генерация арта

Теперь у нас есть все, что нужно: список позиций и цветов символов, из которых будем формировать изображение и функция, которая эти символы будет возвращать. Давайте уже сгенерируем наш арт.

Отлично! Наш арт готов. Осталось только показать его пользователю.

Генератор артов из символов

Text art, also called ASCII art or keyboard art is a copy-pasteable digital age art form. It’s about making text pictures with text symbols. As we now live in informational societies, I bet you’ve already encountered those ASCII-painted pics somewhere on Internet. You can copy and paste text ASCII art to Facebook, Instagram, Snapchat and into any comments, chats, blog posts and forums.

I noticed that visitors of my site like artful text pictures. People have been putting text images composed of symbols into comments on my pages since the first FB comment box stood the source of my website years ago. I actually deleted that Facebook comment box after some time, as it took as much time to load as the whole page without it.

So I decided to make a collection of this cool text art. ≧◔◡◔≦ I started collecting funny text art from comment art and profiles. I, also, searched the net a bit, but I found just a few good text art that work on Facebook. Right now, there’s more, as lots of people actually copied some to their websites from here ヅ.

Читайте также: Регулятор напряжения для генератора электросхема

( ͡° ͜ʖ ͡°( ಠ ͜ʖ ಠ ) ͡° ͜ʖ ͡°) The wast majority of ASCII text art pictures in here were submitted as comments by creative FSymbols visitors just like you. Maybe, exactly you, or your friends.. if not them then say «friends of your friends of your» 2 times — that’s them. I’ve improved some of the arts to look even better. Thanks, everyone!

Note, that text pics were made to look fine in Lucida Grande, Tahoma and Verdana fonts, which are default on Facebook. Sadly, some now look a bit flawed as text message art when viewed in Facebook Messenger, or a similar app on iPhone, as iOS switched to a text font with which some of this ASCII art text drawings aren’t rendered with appropriate symbol width.

Try typing some text below to turn it into big copy pasteable text art font.

мой текст

текст искусство

pеклама

связанный

pеклама

  • Добро пожаловать в Messletters художественного текста! (͡° ͜ʖ ͡°)
  • Письма, шрифты, символы и символы для вашего Facebook, Twitter или блог!
  • (☞゚ヮ゚)☞ Есть в настоящее время 635 посетителей на Messletters.ru
  • Присоединяйтесь к нам на Facebook! ◔͜͡◔ Facebook.com/messletters
  • Присоединяйтесь к нам на Twitter! ◑͜͡◐ Twitter.com/messletters
  • Присоединяйтесь к нам на Youtube! ಠ͜ಠ Youtube.com/messlettersvideos
  • Нужна помощь? Свяжитесь с нами через ➨ Facebook➨ Twitter или ➨ связавшись!
  • Не ваш язык? Выберите нужный язык в верхнем правом углу! ≧◔◡◔≦
  • Также посетите наши другие веб-сайты, такие как WeirdGenerator.com! ツ
  • Peace out! (っ ◔◡◔) っ ♥

Категории

Popular

Текст Искусство создание образов из текста, также известный как ASCII искусства. Вы можете использовать его на Facebook или в Youtube, например! ツ
Мы сделали коллекцию от тех, которые мы нашли в Интернете.
Есть много художественного текста изображения можно найти в Интернете. Если вы нашли хороший друг другом месте, не стесняйтесь, чтобы отправить его нам!

Вы ищете художественного текста на одну строку? Нажмите здесь!

Это абсолютно нормально для некоторых символов появляться в виде квадратов.
Хотите добавить свои собственные творения или не можете что-то найти? Отправьте нам сообщение! Kонтакт

Made with 💙 by Clix Concepts © 2005 -2021 v. 21.8.29.0

Как составить картину из ASCII-кодов

Современные фоторедакторы предоставляют широкие возможности по обработке и улучшению фото. Но ни одна фоторабота не может произвести такого зрительного эффекта, как ASCII-графика.

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

Обычным пользователям это казалось чем-то непосильным. Тогда вряд ли можно было себе представить, какие возможности откроются через десять лет. Но уже наступила эпоха 3D, а некоторые энтузиасты до сих пор активно развивают технику создания текстовых картин.

Секрет неизменной популярности прост: сегодня мы воспринимаем ASCII-графику как атрибут «компьютерного ретро», который придает соответствующий колорит дизайнерскому макету. К тому же в этом есть элемент романтики: не зря одна из самых популярных тем для подобных рисунков — признания в любви.

Читайте также: Подшипник ролика натяжителя ремня генератора гранта

Конвертация фото в символы

Самый простой способ получения ASCII-картины — создать ее из уже готовой фотографии или обычной растровой иллюстрации. Для этого хорошо подходит простая в использовании программа Ascii Art Maker.

Пожалуй, главная функция этой утилиты — конвертация обычного изображения в ASCII-формат. Получаемый узор составляется из заданных или случайных символов, имеющих разные оттенки. Для того чтобы программа более точно сгенерировала рисунок, в Ascii Art Maker встроен модуль подстройки параметров исходного фото — контрастности, яркости и насыщенности. Все изменения сразу отражаются на изображении.

Удобнее всего корректировать показатели поворотом колесика мыши, предварительно кликнув по нужному параметру. Еще одна функция программы — составление текстовых надписей из различных символов, то есть возможность получать эффект «текста из текста». Результат работы в Ascii Art Maker может быть сохранен в одном из
графических (BMP, JPEG, GIF и PNG) или текстовых (TXT и RTF) форматов. Также можно сгенерировать HTML-страницу с созданным рисунком.

Программа платная: стоимость лицензии —295 рублей. В демоверсии доступны все функции, однако сохранить результат невозможно.

На все готовое

Чтобы самостоятельно создать рисунок или логотип, состоящий из произвольного набора символов, нужно обладать не только художественными способностями, но и развитым воображением. Разработчики Cool ASCII взяли этот труд на себя и собрали целую библиотеку изображений самой разной тематики, выполненных в стиле ASCII.

Как заявляют создатели программы, в ней содержатся тысячи различных рисунков. Чтобы ориентироваться в этом многообразии было легче, все картинки отсортированы по тематическим категориям: животные, любовь, люди и т. д. Эту библиотеку удобно использовать, например, для вставки ASCII-изображений в электронные сообщения.

К сожалению, преобразование любых текстовых надписей в рисунок из символов реализовано не самым удачным образом: русский текст не конвертируется корректно, к тому же при каждом изменении необходимо нажимать кнопку «Convert», чтобы увидеть результат в окне программы.

Cool ASCII может генерировать код и на основе изображения, однако по сравнению с предыдущей утилитой здесь много ограничений. Например, конвертировать в ASCII-узор можно только файлы BMP, а результат позволяется сохранить лишь в формате HTML. Бесплатной версии у этой программы нет — только пробная.

ASCII-палитра

Тем, кто не прочь проявить талант художника, но при этом ищет новые инструменты, можно посоветовать ASCII Art Studio.

Это полноценный редактор, предназначенный для создания всевозможной символьной графики. В программе позволяется делать почти все то же, что и в обычном графическом редакторе: рисовать линии и различные фигуры, делать заливку и т. д.

ASCII Art Studio поддерживает конвертирование файлов в форматах BMP, JPEG и GIF в символьный узор.

Стоимость утилиты довольно высока — около 900 рублей, однако предусмотрен бесплатный пробный период продолжительностью 30 дней.

Онлайновая арт-графика

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

Например, для любителей похвастаться продвинутой ASCII-графикой существует довольно простой ресурс ASCII-Art-Generator.

Загрузив на него фото размером до 500 кбайт, вы получите ASCII-рисунок в формате TXT. Еще один интересный ресурс — ASCII Generator позволяет облекать в симпатичное арт-исполнение различные текстовые фразы. Поддерживаются только латинские символы.

  • Свежие записи
    • Как я ремонтировала свой автомобиль
    • Автомобильные зеркала
    • Ностальгия по «бугатти»
    • Тест драйв. OPEL MOKKA – лучший полноприводный кроссовер в своем классе
    • McFarlan — от рассвета до заката


    источники:

    https://dmsht.ru/generator-artov-iz-simvolov