Современные фоторедакторы предоставляют широкие возможности по обработке и улучшению фото. Но ни одна фоторабота не может произвести такого зрительного эффекта, как ASCII-графика.
Сегодня уже немногие помнят то время, когда использование букв, цифр и других символов было едва ли не единственным способом проявить художественные способности при работе за компьютером. Собранные наподобие мозаики картины из ASCII-кодов, представляющие собой текстовые, а не графические файлы, поражали воображение и вызывали уважение к их создателям.
Как создать рисунок из символов ASCII в командной строке
Обычным пользователям это казалось чем-то непосильным. Тогда вряд ли можно было себе представить, какие возможности откроются через десять лет. Но уже наступила эпоха 3D, а некоторые энтузиасты до сих пор активно развивают технику создания текстовых картин.
Секрет неизменной популярности прост: сегодня мы воспринимаем ASCII-графику как атрибут «компьютерного ретро», который придает соответствующий колорит дизайнерскому макету. К тому же в этом есть элемент романтики: не зря одна из самых популярных тем для подобных рисунков — признания в любви.
Конвертация фото в символы
Самый простой способ получения ASCII-картины — создать ее из уже готовой фотографии или обычной растровой иллюстрации. Для этого хорошо подходит простая в использовании программа Ascii Art Maker.
Пожалуй, главная функция этой утилиты — конвертация обычного изображения в ASCII-формат. Получаемый узор составляется из заданных или случайных символов, имеющих разные оттенки. Для того чтобы программа более точно сгенерировала рисунок, в Ascii Art Maker встроен модуль подстройки параметров исходного фото — контрастности, яркости и насыщенности. Все изменения сразу отражаются на изображении.
Удобнее всего корректировать показатели поворотом колесика мыши, предварительно кликнув по нужному параметру. Еще одна функция программы — составление текстовых надписей из различных символов, то есть возможность получать эффект «текста из текста». Результат работы в Ascii Art Maker может быть сохранен в одном из
графических (BMP, JPEG, GIF и PNG) или текстовых (TXT и RTF) форматов. Также можно сгенерировать HTML-страницу с созданным рисунком.
Программа платная: стоимость лицензии —295 рублей. В демоверсии доступны все функции, однако сохранить результат невозможно.
На все готовое
ТОП 5 ПРОГРАММ КАРТИНКИ ИЗ СИМВОЛОВ НА КЛАВИАТУРЕ
Чтобы самостоятельно создать рисунок или логотип, состоящий из произвольного набора символов, нужно обладать не только художественными способностями, но и развитым воображением. Разработчики 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 позволяет облекать в симпатичное арт-исполнение различные текстовые фразы. Поддерживаются только латинские символы.
Фото: компании-производители; Alex Paterov, Valua Vitaly/Fotolia.com
Источник: ichip.ru
Создание текстовых рисунков
Многие видели рисунки с помощью букв и символов на страницах блогов и на стене в контакте. Еще, наверное, удивлялись, какой талантливый человек. Такое буквами нарисовать! Конечно, есть художники, увлекающиеся ascii-графикой (так это называется), и создающие творения по буковке. Но ваш знакомый скорее всего воспользовался программой для преобразования картинки в текстовый рисунок.
Я с удивлением обнаружил, что бесплатных программ по созданию текстовых рисунков не так уж и много. А хороших — еще меньше. Собственно, остановился я на двух программах.
Ascii Pic
Ascii Pic — маленькая программка, которая не блещет ни дизайном ни удобством. Но она по крайней мере не очень глючит. И работает достаточно быстро. В первой вкладке вам предлагают выбрать входной и выходной файл. Во второй — предварительный просмотр выбранной картинки и кнопка Process («Поехали» по-нашему).
И только в третьей вкладке — настройки этого самого «поехали».
Настроек не много, но зато самые важные.
Brightness — яркость текстовой картинки. Это влияет на набор используемых символов.
Zoom — масштаб выходной картинки. Очень полезная опция. Если вы попытаетесь преобразовать большую картинку 1:1, то получите огромную «простыню» символов, которую не разместишь ни на одном экране.
Palette — палитра. На самом деле просто подбирается набор символов так, чтобы изображение в символах выглядело оттенками серого, черно/белым или инвертированным.
Результат скидывается прямо в файл, предварительного просмотра нет.
Но в целом программа работает, изображения получаются правдоподобные, особых ошибок не замечено.
Скачать Ascii Pic(190 Kb) | (Зеркало)
Ascii Generator dotNET
Ascii Generator dotNET — программа посолиднее. Она позволяет предварительно просмотреть текстовую картинку, выбрать самостоятельно набор символов. Картинку — источник можно вращать, соответственно пересчитывается и результат. Очень удобно то, что можно точно задать размер выходной картинки. Например, 80х60 символов.
И программа пересчитает картинку, чтобы она нормально выглядела в этом «разрешении». Настройка параметров выходного изображения гораздо более гибкая, чем в Ascii Pic. Например, вы можете регулировать насыщенность будущей картинки используя гистограмму яркости исходного изображения. При этом результат виден тут же, мгновенно. К тому же поддерживаются «раскрашенные» текстовые картинки.
Также к плюсам можно отнести пакетную обработку изображений. То есть вы можете дать программе на обработку сотню картинок и идти спать.
Безусловно, рекомендовать стоит именно Ascii Generator dotNET. Но решать вам.
Источник: qiqer.ru
Генератор ASCII-артов на HTML5
Доброго времени суток, уважаемые хаброжители.
В этой статье я расскажу о том, как при помощи HTML5 можно сделать простенькое приложение, которое будет генерировать ASCII-арты на основе обычных изображений. Статья ориентирована на тех, кто только начинает свое знакомство с такой замечательной технологией, как HTML5, коим являюсь и я. Профессионалы вряд ли найдут для себя что то новое.
Дело было вечером, делать было нечего
Копался я недавно в интернете в поисках обоев и наткнулся на одно интересное изображение(1.1мб). И меня “зацепила” идея рисовать изображения разноцветными буквами. Порывшись в интернете узнал, что это называется ASCII-art. Ну и конечно же первая мысль: “А запилю ка я приложение, что бы мои любимые обои таким образом нарисовало!”
Сказано — сделано. Есть время, есть желание — почему бы не попробовать.
Было решено реализовывать приложение в браузере. Я давно смотрел на HTML5 и облизывался, да все никак руки не доходили поиграться. А что? Технология модная, перспективная, почему бы не попробовать? Да и проект не сложный, для изучения чего то нового — самое то.
На этом и остановился.
Постановка задачи
- наличие двух способов загрузки исходного изображения: через поле выбора файла и перетаскиванием в специальную область (далее будем называть «область приема»);
- отсутствие сложных настроек. Только самое необходимое: цвет фона, используемый текст и размер шрифта;
- возможность обработки изображений с прозрачным фоном;
- работа должна происходить только в браузере, без обращений к серверу и без перезагрузки страницы.
Для начала, набросаем html-разметку. Страница приложения делится на три логических части:
1. Область загрузки исходного изображения
Source image
Drop source image here. Or select this here:
2. Область настроек
Settings
Used text: Font size: px Background: Transparent:
3. Область предпросмотра
Previews
Загрузка исходного изображения
Для начала разберем способ загрузки исходного изображения.
Для того, что бы получить доступ к выбранному пользователем файлу, без отправки его она сервер используется класс FileReader . Его метод readAsDataURL() возвращает содержимое файла в виде схемы data:URL. Ну что же, давайте попробуем.
Теперь у нас есть исходное изображение в виде data:URL. Что с ним можно сделать? Его можно использовать в качестве значения атрибута src для изображения. Поэтому давайте покажем пользователю исходное изображение.
var sourceImage = document.getElementById(«mage-source»); sourceImage.src = fileData;
Вот, так намного нагляднее. Теперь самое главное: необходимо обработать это изображение.
Настройки
Мы не будем сохранять настройки каждый раз, когда пользователь их меняет. Вместо этого мы считаем их всего один раз, непосредственно перед обработкой изображения.
var usedText = document.getElementById(«input-used-text»).value; var fontSize = document.getElementById(«input-font-size»).value; var backgroundColor = (document.getElementById(«input-background-transparent»).checked == true) ? «rgba(0,0,0,0)» : document.getElementById(«input.background-color»).value;
Теперь перейдем непосредственно к генерации нашего арта.
Обработка изображения
- получение данных об исходном изображении. А точнее — нам нужен цвет каждого пикселя;
- расчет размеров символов, при помощи которых будет формироваться арт;
- расчет цвета каждого символа и его цвета;
- непосредственно генерация арта;
- представление арта в виде изображения, что бы пользователь мог сохранить плод своих стараний.
Получение данных об исходном изображении
Для того, что бы узнать цвета пикселей исходного изображения, необходимо создать канву и нанести изображение на нее. Сначала добавим канву на страницу:
Теперь зададим ей такие же размеры, как и у исходного изображения и нанесем это изображение на нее. А затем получим информацию о канве, а как следствие — об исходном изображении.
var canvas = document.getElementById(«canvas»); var context = canvas.getContext(«2d»); canvas.width = sourceImage.width; canvas.height = sourceImage.height; context.drawImage(sourceImage, 0, 0); var sourseData = context.getImageData(0, 0, canvas.width, canvas.height).data;
Метод getImageData() возвращает информацию о канве. Поле data содержит описание каждого пикселя, как раз то, что нам надо.
Теперь у нас есть необходимая информация. Вот только представлена она не в самой лучшей форме. Это одномерный массив, где первые четыре элемента описывают первый пиксель (rgba), элементы с пятого по восьмой — второй пиксель и т.д. до конца. Как с таким работать, я слабо представляю. Поэтому давайте приведем эту кучу чисел в человеческий вид.
var getPixelsGrid = function(source) < var res = []; for (var i = 0; i < source.length; i += 4) < var y = Math.floor(i / (canvas.width * 4)); var x = (i — (y * canvas.height * 4)) / 4; if (typeof res[x] === «undefined») < res[x] = []; >res[x][y] = < r: source+0], g: source[i+1], b: source[i+2], a: source[i+3] >> return res; > var pixelsGrid = getPixelsGrid(sourseData);
Теперь мы имеем двумерный массив где каждый пиксель представлен объектом. С ним и будем работать дальше.
Расчет размеров символа
Как получить точный размер символа? Не размер шрифта, а область, которую символ занимает на экране? Что бы не заморачиваться, просто создадим временный span с этим символом и замерим его размер.
var countUsedTextSize = function(symbol, size) < var block = document.createElement(«span»); block.innerHTML = symbol; block.style.fontSize = size + «px»; block.style.fontFamily = «Monospace»; document.body.appendChild(block); var re = [(block.offsetWidth, Math.floor(block.offsetHeight * 0.8)] document.body.removeChild(block); return re; >; // Передаем первый символ, из введенного пользователем текста. var size = countUsedTextSize(usedText[0], fontSize); var usedTextWidth = size[0] var usedTextHeight[1];
Внимательный читатель скорее всего заметил, что учитывается не вся высота символа, а только 80%. Это сделано потому, что видимая часть буквы занимает не всю отводимую ей высоту. Из-за этого на итоговом изображении появляются пустые горизонтальные линии между строчками. Особенно они заметны, если буквы большого размера.
Я пристрелялся, так что бы при разных размерах шрифта расстояние между строчками было минимальным — получилось 80%. Так и оставим.
Расчет положения и цвета символов
Теперь необходимо составить “карту символов” — список, содержащий информацию о каждом символе, из которых будет формироваться итоговое изображение. Необходимо знать координаты символа и его цвет.
В качестве цвета символа будем использовать цвет пикселя, находящегося в центре области исходного изображения, занимаемой этим символом. Ну или рядом с ним, в случае области с нечетным количеством пикселей по одной из сторон.
var getAvgPixelsList = function(grid) < var res = []; var stepX = usedTextWidth; var stepY = usedTextHeight; var countStepsX = canvas.width / stepX; var countStepsY = canvas.height / stepY; for (var y = 0; y < countStepsY; y++) < for (var x = 0; x < countStepsX; x++) < res.push(< x: x * stepX, y: y * stepY, r: grid[x * stepX][y * stepY].r, g: grid[x * stepX][y * stepY].g, b: grid[x * stepX][y * stepY].b, a: grid[x * stepX][y * stepY].a >); > > return res; >; var avgPixelsList = getAvgPixelsList(pixelsGrid);
Так же определим функцию, которая будет возвращать очередной символ из введенного пользователем текста. А при достижении конца, начинать сначала.
var nextUsedChart = 0; var getNextUsedChart = function() < var re = usedText.substring(nextUsedChart, nextUsedChart+1); nextUsedChart++; if(nextUsedChart == str.length) < nextUsedChart = 0; >return re; >;
Генерация арта
Теперь у нас есть все, что нужно: список позиций и цветов символов, из которых будем формировать изображение и функция, которая эти символы будет возвращать. Давайте уже сгенерируем наш арт.
var getResultData = function(list) < // Очищает канву от исходного изображения и заливает фон. context.clearRect(0, 0, canvas.width, canvas.height); context.fillStyle = backgroundColor; context.fillRect(0, 0, canvas.width, canvas.height); // Наносит символы. for (var i = 0; i < list.length; i++) < var px = list[i]; context.fillStyle = «rgba(» + px.r +», » + px.g + «, » + px.b + «, » + px.a + «)»; context.font = fontSize + «px Monospace»; context.fillText(getNextUsedChart(), px.x, px.y); >return canvas.toDataURL(); >; var resultData = getResultData(avgPixelsList);
Отлично! Наш арт готов. Осталось только показать его пользователю.
var resultImage = document.getElementById(«image-result»); resultimage.src = resultData;
Итоги
Поздравляю, наш генератор готов! Более того, он даже работает.
Вот несколько примеров:
А вот с прозрачным фоном ~300Kb
Здесь можно посмотреть на то, что у нас получилось.
А здесь лежат исходники. Они несколько отличаются от тех, что описаны в статье (функционал разнесен по классам), но логика работы та же.
- в хроме приложение работает в разы быстрее, чем в других браузерах;
- при обработке большого изображения (больше чем 1000х1000). Хром отказывается открывать его в новом окне, при этом убивая вкладку с сообщением “нехватка памяти”. В других браузерах это работает, хотя и медленно. Я думаю, это связанно с тем, что при передаче изображения через url строка получается слишком длинной;
Заключение
- сейчас, если зайдет пользователь с устаревшим браузером, приложение ничего не скажет, просто не будет работать. Надо добавить проверку на поддержку используемых технологий. Так же необходимо добавить проверку вводимых пользователем данных;
- если размер исходного изображения не кратен размеру символа, внизу и справа появляются пустые полосы. Необходимо решить эту проблему.
- ну и кроссбраузерность. У меня была возможность проверить только в chromium 25, chrome 27, firefox 21, opera 12 и safari на айфоне (версию не нашел). В остальных браузерах надо тестировать и исправлять баги.
На этом я заканчиваю. Спасибо, что дочитали до конца. Надеюсь, вы нашли для себя что то полезное. Стройного вам кода.
- Разработка веб-сайтов
- JavaScript
- HTML
Источник: habr.com