Я разработал генератор ASCII-арта в Node JS

В этой статье вы увидите, как сделать генератор ASCII-арта из изображения.

Результат:

но сначала

что такое ASCII-арт?

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

Необходимые условия

Для данного проекта мне хочется применить свои знания JS, поэтому я буду использовать:

• Node js

• Sharp

• readline-sync

npm i sharp readline-sync

Этапы программы:

Когда я думал об ASCII-арте, то представлял, что он создается с помощью какого-то алгоритма детекции краев. Как же я ошибался — для создания ASCII-арта из изображения вам потребуется:

• превратить изображение в черно-белое;

• изменить размер изображения;

• заменить все черно-белые пиксели на символы, определяющие яркость и темноту/тень.

Итак, давайте приступим. Сначала я создам файл package.json, сделав следующее:

npm init

Как только я получу свой пакет, то создам index.js файл, где будет находиться мой код.

Когда это будет сделано, я импортирую все зависимости, необходимые для этого проекта, следующим образом:

const sharp = require("sharp"); const readlineSync = require("readline-sync"); const fs = require("fs");

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

Получение пользовательского ввода

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

var filePath = readlineSync.question("What's the file path ");

Зачем нам нужен readlineSync?

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

Далее я проверю, корректен ли путь или нет, с помощью операторов try/catch, как здесь:

try {     const file = await sharp(filePath);     return file;   } catch (error) {     console.error(error);   }

и вся функция выглядит следующим образом:

const loadFileFromPath = async () => {   var filePath = readlineSync.question("What's the file path ");   try {     const file = await sharp(filePath);     return file;   } catch (error) {     console.error(error);   } };

Преобразование в черно-белое

Для этого я сначала создам функцию convertToGrayscale с таким параметром пути, как здесь:

const convertToGrayscale = async (path) => {   // code };

В этой функции я загружу изображение, изменю его цветовые значения на черно-белые и, наконец, верну черно-белый результат.

const convertToGrayscale = async (path) => {  const img = await path;   const bw = await img.gamma().greyscale();  return bw; };

Изменение размера изображения

Для этого я сначала создам функцию resizeImg с параметрами bw и newWidth = 100 следующим образом:

const resizeImg = async (bw, newWidth = 100) => {   //code };

Затем я буду ждать ч/б изображение и ожидать результат переменной blackAndWhite, потом получу метаданные для доступа к свойствам размеров.

const resizeImg = async (bw, newWidth = 100) => {   const blackAndWhite = await bw;   const size = await blackAndWhite.metadata(); };

далее вычисляем пропорции изображения, для этого просто делим ширину на высоту и получаем необходимое соотношение. Затем мы рассчитываем нашу новую высоту:

const ratio = size.width / size.height; newHeight = parseInt(newWidth * ratio);

Потом мы окончательно изменяем размер изображения и возвращаем его в таком виде:

const resized = await blackAndWhite.resize(newWidth, newHeight, {     fit: "outside",   }); return resized;

Вся функция должна выглядеть следующим образом:

const resizeImg = async (bw, newWidth = 100) => {   const blackAndWhite = await bw;   const size = await blackAndWhite.metadata();   const ratio = size.width / size.height;   newHeight = parseInt(newWidth * ratio);   const resized = await blackAndWhite.resize(newWidth, newHeight, {     fit: "outside",   });    return resized; };

Преобразование пикселей в ASCII-символы 

Для этого я сначала создам функцию pixelToAscii с параметром img следующим образом:

const pixelToAscii = async (img) => {  //code };

Затем я создам переменную для хранения img с ключевым словом await. Потом получу массив пикселей изображения и сохраню его в переменной pixels.

var newImg = await img; const pixels = await newImg.raw().toBuffer(); };

Дальше создам переменную characters, которая будет содержать пустую строку. Затем я пройдусь по каждому пикселю из массива и введу ASCII-символ в созданную ранее строку:

characters = ""; pixels.forEach((pixel) => {     characters = characters + ASCII_CHARS[Math.floor(pixel * interval)];   });

Вы можете заметить две глобальные переменные, которые еще не упоминались:

• interval

• ASCII_CHARS

Я объясню вам, что они из себя представляют:

• ASCII_CHARS — это переменная, в которой хранятся все ASCII-символы:

ASCII_CHARS = "$@B%8&WM#*oahkbdpqwmZO0QLCJUYXzcvunxrjft/\\|()1{}[]?-_+~<>i!lI;:,\"^`'. ".split(   "" );

• interval — это ascii, который должен быть присвоен цвету (интенсивность).

charLength = ASCII_CHARS.length; interval = charLength / 256;

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

const pixelToAscii = async (img) => {   var newImg = await img;   const pixels = await newImg.raw().toBuffer();   characters = "";   pixels.forEach((pixel) => {     characters = characters + ASCII_CHARS[Math.floor(pixel * interval)];   });   return characters; };

Теперь все шаги сделаны, давайте создадим ядро приложения:

Главная функция

Для этого я сначала создам функцию main с параметрами newWidth = 100 следующим образом:

const main = async (newWidth = 100) => {   //code };

В этой функции я создам функцию с названием: *newImgData, которая будет равна всем тем функциям, которые мы создали ранее, вложенным следующим образом:

const main = async (newWidth = 100) => {   const newImgData = await pixelToAscii(     resizeImg(convertToGrayscale(loadFileFromPath()))   ); };

Затем я выясню длину моих символов и создам пустую переменную с именем ASCII следующим образом:

const pixels = newImgData.length; let ASCII = "";

Потом переберу список пикселей:

for (i = 0; i < pixels; i += newWidth) {     let line = newImgData.split("").slice(i, i + newWidth);     ASCII = ASCII + "\n" + line;   }

По существу, я делаю разбиение на строки. Получаю размер newWidth, нарезаю массив как строку этой newWidth и затем добавляю символ \n для перехода к следующей строке.

Экспорт в текстовый файл

И, наконец, в той же функции для сохранения текста в файл я сделал следующее:

setTimeout(() => {     fs.writeFile("output.txt", ASCII, () => {       console.log("done");     });   }, 5000);

В результате мы получили ASCII-арт генератор из изображения! И, конечно же, не забудьте про main() для первого вызова функции.

Законченный код должен выглядеть следующим образом:

const sharp = require("sharp"); const readlineSync = require("readline-sync"); const fs = require("fs");  ASCII_CHARS = "$@B%8&WM#*oahkbdpqwmZO0QLCJUYXzcvunxrjft/\\|()1{}[]?-_+~<>i!lI;:,\"^`'. ".split(   "" ); charLength = ASCII_CHARS.length; interval = charLength / 256; var newHeight = null; const main = async (newWidth = 100) => {   const newImgData = await pixelToAscii(     resizeImg(convertToGrayscale(loadFileFromPath()))   );   const pixels = newImgData.length;   let ASCII = "";   for (i = 0; i < pixels; i += newWidth) {     let line = newImgData.split("").slice(i, i + newWidth);     ASCII = ASCII + "\n" + line;   }    setTimeout(() => {     fs.writeFile("output.txt", ASCII, () => {       console.log("done");     });   }, 5000); };  const convertToGrayscale = async (path) => {   const img = await path;   const bw = await img.gamma().greyscale();   return bw; };  const resizeImg = async (bw, newWidth = 100) => {   const blackAndWhite = await bw;   const size = await blackAndWhite.metadata();   const ratio = size.width / size.height;   newHeight = parseInt(newWidth * ratio);   const resized = await blackAndWhite.resize(newWidth, newHeight, {     fit: "outside",   });    return resized; };  const pixelToAscii = async (img) => {   var newImg = await img;   const pixels = await newImg.raw().toBuffer();   characters = "";   pixels.forEach((pixel) => {     characters = characters + ASCII_CHARS[Math.floor(pixel * interval)];   });   return characters; };  const loadFileFromPath = async () => {   var filePath = readlineSync.question("What's the file path ");   try {     const file = await sharp(filePath);     return file;   } catch (error) {     console.error(error);   } }; main();

Чему я научился в ходе работы над этим проектом?

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

---

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