Перевод картинки в псевдографику

Содержание

FoxTools v.2.0

Привет, Гость! Ваш IP: 93.81.217.68

Конвертер картинок в ASCII

Что такое ASCII?

ASCII (англ. American Standard Code for Information Interchange — американский стандартный код для обмена информацией) — представляет собой кодировку для представления десятичных цифр, латинского и национального алфавитов, знаков препинания и управляющих символов. Каждый символ имеет свой числовой код.

ASCII Art — это использование печатных символов (ASCII) для вывода изображений.

Какой формат лучше?

Текст удобно использовать, если вы хотите сохранить изображения в текстовом формате, например в файл *.txt. В тексте будут только печтаные символы (ASCII) и ничего лишнего. Исключение составляют лишь цветные изображения, для их создания используется html-теги.
Текстовой формат можно использовать и для html, ASCII-код изображения будет помещен в теги . Но это будет иметь смысл, только если у вас есть полный доступ к html-коду, где вы собираетесь использовать ASCII-картинку.

Html удобно использовать для сохранения изображений в формате html, например, для добавления на сайт. Для создания цветных html изображений, ASCII не используется, вместо пикселей вставляются фиксированные пробелы с определенным фоном. Такие изображения можно без проблем вставить куда угодно, хоть в документ MS Word, хоть в текст сообщения на сайте Odnoklassniki.ru. При этом, структура изображения будет полностью сохранена.

Какие ASCII-символы лучше использовать и в каком количестве?

ASCII-символы используются только в текстовом формате. Чем больше символов, тем больше цветов будет отражено. Первый символ будет заменять черный цвет изображения, последний — белый.

Рекомендуется использовать следюущий набор символов:
#, # (это не опечатка), @, %, =, +, *, :, -, ., пробел.
использовать

Зачем уменьшать изображения?

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

Например, следующиее изображение имеет размер 64×64 пикселей:

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

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

Крупные (более 500px — хотя это тоже много) изобаржения будут уменьшены автоматически.

Сайт построен на HTML5

Для корректной работы данного сайта требуется HTML5.

Пожалуйста, воспользуйтесь браузером, который поддерживает HTML5. Многие современные браузеры поддерживают HTML5. Например:

Источник

Конвертируем картинку в ANSI

Не знаю, насколько это будет кому-то интересно, но на днях решил поиграться и сделать следующее:

Дано: Картинка (например, BMP) 640 на 400, шрифт 8 на 16

Надо: Перевести ее в ANSI псевдографику в стандартном режиме 80 на 25 символов, символы и фон могут иметь любой цвет (true color).

Благодаря очень хорошим комментариям я обновил версию: ссылка
С ней получаются примерно такие картинки:

Здесь стоит оговориться, что «тру» EGA текстовый режим с 16 цветами нам не подойдет, так как получится слишком некрасиво из-за низкого разрешения и большого размера символов. Второй аргумент: задача не стоИт максимально приблизить картинку ее символьному представлению, так как тогда можно было бы уменьшать шрифт, увеличивать разрешение и т.д. Задача — сделать именно такой фильтр, который описан выше.

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

Для реализации нам понадобится какая-нибудь библиотека для работы с графикой, умеющая getpixel и putpixel, то есть считать цвет пикселя с экрана и нарисовать пиксель заданным цветом на экран. Я пользуюсь старенькой, но проверенной библиотекой Allegro (www.allegro.cc), которая легка в обращении, а также позволяет работать в разных ОС (даже в MSDOS!).

Но хватит слов, пора к делу.

Устанавливаем константы, отвечающие за размер картинки и размер ее текстового представления.

Начинаем основной цикл, в котором последовательно находим каждый символ из 80 на 25 матрицы. Следующий цикл — по каждому пикселю той области картинки, которая соответствует на экране данному символу из этой матрицы. Как легко сообразить, область эта составляет 640/80=8 на 400/25=16 пикселей. Здесь полезно вспомнить, что это как раз равно размеру нашего шрифта.

В этом втором цикле наша задача — найти средний цвет, который мы установим в качестве цвета фона нашего ANSI символа. Сделать это очень просто: раскладываем цвет на R, G, B компоненты и вычисляем среднее по каждой из них.

Дальше уже более интересно. Нам приходится вставить еще один цикл — по каждому символу из ASCII таблицы (всего их 256). Я беру их из черно-белой картинки с шрифтом, то есть теоретически, там могут быть любые изображения 8 на 16 в качестве символа. Стоит отметить, что в этом месте можно ограничиться только какой-то одной областью символов (например, кириллицей), что сильно повлияет на результат.

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

Стоит также отметить, что число таких пикселей может быть равно нулю (например, символ 32 — пробел). С этим надо быть внимательнее.

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

Далее следует вывод на экран (в двух режимах — с фоном и без (пример)), но на нем мы останавливаться не будем, так как там всё самоочевидно.

Программу и исходный код можно скачать здесь: dimouse.ru/data/ansiconv.rar (130 Kb).

Как насчет нарисовать это дело в текстовом режиме? Как вы можете увидеть, программа создает файл с результатами (кроме нового bmp) — ascii. Там для каждого символа хранится его значение в ASCII таблице, его цвет и цвет его фона. Я для текстового режима пользуюсь pdcurses.sourceforge.net (пишите в комментариях, если знаете что-то лучше!), но эта библиотека, хоть и является враппером над SDL (во всяком случае, виндовая версия — точно), не умеет показывать цвета больше 16: тяжелое наследие древности. Как вы, наверное, помните, PDCurses берет свое начало от знаменитой Interactive Fiction игры Curses. Но один товарищ написал усовершенствование этой библиотеки и выложил здесь: www.projectpluto.com/win32a.htm

К сожалению, в ней нельзя использовать bitmap шрифт, только системные (зато можно выбрать любой), что несколько портит впечатление. Но задачу также можно считать выполненной.

Программу для чтения ascii можно скачать здесь: dimouse.ru/data/ascii.rar (70 Kb).

Редакторский дайджест

Присылаем лучшие статьи раз в месяц

Скоро на этот адрес придет письмо. Подтвердите подписку, если всё в силе.

Средняя зарплата в IT

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

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

Дык! А вот эта дема так ваще. Какая здоровская синхронизация камеры с музыкой и объектами… Немного фликера многовато, но с другой стороны придает особый шарм. Дема, которая западает в памяти. Виндоюзерам советаю все-таки качнуть EXE (около 100 Кб), а не смотреть унылое ютуб-видео.

ascii-файл — это тупо дамп в таком виде: байт — номер символа ascii (я честно говоря, сам не помню какая там кодировка, скорее всего вообще досовская, см. шрифт в файле pdcfont.bmp), 3 байта — RGB компоненты цвета фона, 3 байта — RGB компоненты цвета символа.

Насчет HTML — я попробую сделать дамп в html.

Но возникают те же проблемы, что я вкратце упоминал выше при использовании pdcurses:
Поскольку в браузере используются true type шрифты, то вывод не соответствует тому, как происходит подбор. Основная проблема в том, что сам символ и область под фон не равны — область под фон дается больше. И символы, конечно не 8 на 16. И вообще полный отстой получается.
В лучшем случае можно получить что-то вроде этого:

Не забудьте, что кодировка используется досовская (CP-866) и ее надо выставить в браузере!
Как альтернатива — можно использовать только нижнюю часть ASCII (до 128), но тогда будет некрасиво (только буквы).
Еще я в этой версии не использую символы до 32 (всякие рожицы и т.д.). Их вроде в html тоже можно выводить, но нужно как-то так: амперсант, решетка, номер символа. Я пока поленился добавить.

>я в этой версии не использую символы до 32 (всякие рожицы и т.д.). Их вроде в html тоже можно выводить

А нет, нельзя их выводить в html

У меня легко получилось «Habrastorage» вывести в HTML (результат) с помощью 2-й версии кодировщика. Но вопросы остались те же: с ним нельзя вывести картинки только с цветом шрифта, существенно используется цвет бекграунда. Поэтому для местных фанатов не подойдёт.

Хабр позволяет задавать цвет шрифта, но не цвет фона. Поэтому можно представить пользу от кодировщика в таком формате (в порядке бреда): юзеру с кармой меньше 0 не разрешают выводить картинки. Тогда он кодирует их в ASCII и выкладывает, обходя недостаток публикатора.

Хотя, возможно, что ему не дают никакими тегами пользоваться. Тогда публикация в ASCII могла бы пригодиться для любителей постить жесты типа «лицорука» в тексте (ASCII). Но тогда нужен формат Unicode. Псевдографика в Arial и Verdana поддерживается (я вот про эти: unicode-table.com/ru/sections/block-elements/, не все из них, а 16, из тут разбросали по кодам). Если преследовать эту практическую (но совершенно ненужную) цель, то каждый символ должен идти примерно в такой кодировке:

█ █ █ ▀ ▅ ▟ ▚ ▖ ▐ ▅ ▀ ▅ ▟ █ █ █
Исходный код:
Полезность её всё же есть по сравнению с чистым DOSом — представление кроссбраузерное и кроссплатформенное, позтому подтолкнёт кого-то на следующую мысль, особенно, если будет на Гитхабе и генерировать тексты из канваса на JS — у имеющейся программы на С++ я всё равно не заметил скорости, отрисовка картинки проходит за секунд 5-8.

> У меня легко получилось «Habrastorage» вывести в HTML (результат)
Скорее всего вывод представлен в неправильной кодировке. Сравните вывод в браузере и в bmp. Но, согласен, вывод в дос-кодировке в html — это извращение жуткое:)

Я сделаю версию, ограничившись только этими символами ASCII (их где-то 50 на самом деле) + без фона (попробую поиграться) + добавлю вывод в html в нормальной кодировке. Интересно, что получится.

Спасибо большое за комментарии — новый вариант мне очень нравится. Надеюсь, вам тоже понравится:)

P.S. В процессе пришлось немного погуглить для перевода DOS-кодировки в юникод. Возможно, кому-то тоже пригодится: www.lingua-systems.com/knowledge/unicode-mappings/cp866-to-unicode.html

Спасибо. Стало почти то, что можно вставлять в форумы: ). Правда, при умолчательных настройках Хрома (Times New Roman) пришлось добавить:
, чтобы не было белых полос между строками.

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

Хроника оптимизации (одними регекспами) такая: исходный ascii.html 80 на 24 в таблицах — 100.5 К (ни в один комментарий не влезет);
* приведение к хабровскому виду (font color) — 68K (многовато для комментария — не так давно даже статьи неявно ограничивали примерно на 42-45 К текста, сейчас не проверял);
* замена белых блоков на символы ░ (не нашёл пробельного среди псевдографики) — 44 К;
* убирание точек с запятой (хак HTML) — 42К;
* убрать по 3 символа справа и слева — 41 К;
Точечный фон выглядит плохо, поэтому дальше:
* Возврат к белым символам — 63К
* Оптимизация — объединение одинаковых последовательностей цветов — 42 К
(регексп
несколько раз). Остальные места не слишком пригодны для ручной оптимизации — цвета почти похожи, но отличаются на единицы и не группируются.

> 1) сводить не к миллиону цветов, а к 256-1К, чтобы затем оптимизировать по рядам одинаковых цветов;
Это можно сделать постфактум, как я приводил пример ниже.

> 2) ввести 16 символов псевдографики, чтобы увеличить детальность картинки вдвое без дополнительных затрат символов.
Сейчас используется 48 символов псевдографики с B0 до E0. Странно, что у вас в выводе ни одного такого не получилось, только полные квадраты. Можно посмотреть исходную картинку?