HTML5 ASCII арт генератор

Добър ден, скъпи хаброжци.

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

Беше вечер, нямаше нищо

Наскоро се разрових в интернет в търсене на тапети и попаднах на едно интересно изображение (1.1mb). И бях „закачен“ от идеята да рисувам изображения с цветни букви. След като се разрових в интернет, разбрах, че това се нарича ASCII-art. И разбира се, първата мисъл: „И ще пия приложение, което ще нарисува любимия ми тапет по този начин!“ Речено – направено. Има време, има желание - защо не опитате.

Беше решено приложението да се внедри в браузъра. Отдавна гледам HTML5 и облизвам устни, но все още ръцете ми не достигат да играя. И какво? Технологията е модерна, обещаваща, защо не я опитате? Да, и проектът не е труден, да изучаваш нещо ново - това е всичко. Тук спря.

Формулиране на проблема

Приложението трябва да отговаря на следните изисквания:

наличието на два начина за зареждане на оригиналното изображение: чрез полето за избор на файл и чрез плъзгане в специална област (по-нататък ще я наричаме "област за получаване");
без сложни настройки. Само най-важното: цвят на фона, използван текст и размер на шрифта;
възможност за обработка на изображения с прозрачен фон;
работата трябва да се извършва само в браузъра, без извиквания към сървъра и без презареждане на страницата.

Ясно е, че проблемът с поддръжката на по-стари браузъри не възниква.

За да започнем, нека очертаемhtml маркиране. Страницата на приложението е разделена на три логически части:

Зареждане на оригиналното изображение

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

Сега имаме нашето изходно изображение като data:URL. какво можем да направим с него? Може да се използва като стойност на атрибута src за изображение. Така че нека покажем на потребителя оригиналното изображение.

Тук е много по-ясно. Сега най-важното: трябва да обработите това изображение.

Няма да запазваме настройките всеки път, когато потребителят ги промени. Вместо това ги броим само веднъж, непосредствено преди обработката на изображението.

Сега да преминем директно към генерирането на нашето изкуство.

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

Целият процес може да бъде разделен на няколко етапа:

получаване на данни за оригиналното изображение. По-конкретно, имаме нужда от цвета на всеки пиксел;
изчисляване на размерите на символите, с които ще се оформи изкуството;
изчисляване на цвета на всеки символ и неговия цвят;
директно генериране на изкуство;
представяне на изкуството като изображение, за да може потребителят да запази плода на усилията си.

Получаване на данни за изходното изображение

За да разберете цветовете на пикселите на оригиналното изображение, трябва да създадете платно и да поставите изображението върху него. Първо, нека добавим платно към страницата:

Сега нека му дадем същите размери като оригиналното изображение и да поставим това изображение върху него. И тогава получаваме информация за платното и като резултатотносно оригиналното изображение.

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

Сега имаме необходимата информация. Просто не е представено по възможно най-добрия начин. Това е едномерен масив, където първите четири елемента описват първия пиксел (rgba), елементите от петия до осмия описват втория пиксел и т.н. до края. Как да работя с това, нямам много идея. Така че нека пренесем тази група числа в човешка форма.

Сега имаме двуизмерен масив, където всеки пиксел е представен от обект. Ще продължим да работим с него.

Изчисляване на размера на символа

Как да получите точен размер на знаците? Не размерът на шрифта, а площта, която символът заема на екрана? За да не се притеснявате, просто създайте временен участък с този знак и измерете размера му.

Внимателен читател най-вероятно е забелязал, че не се взема предвид цялата височина на символа, а само 80%. Това се прави, защото видимата част на буквата не заема цялата отредена й височина. Поради това между редовете в крайното изображение се появяват празни хоризонтални линии. Те са особено забележими, ако буквите са големи. Нацелих се така, че при различни размери на шрифта разстоянието между редовете да е минимално - оказа се 80%. Така че нека го оставим.

Позиция на символа и изчисляване на цвят

Сега е необходимо да се направи „карта на знаците“ - списък, съдържащ информация за всеки герой, от която ще се формира крайното изображение. Трябва да знаете координатите на символа и неговия цвят.

Като цвят на символа ще използваме цвета на пиксела, разположен в центъра на областта на оригиналното изображение, заета от този символ. Е, или до него, в случай на област с нечетен брой пиксели, един отстрани.

Ние също така дефинираме функция, която ще върне следващия знак от текста, въведен от потребителя. И когато стигнете до края, започнете отначало.

Арт поколение

Сега имаме всичко необходимо: списък с позиции и цветове на символи, от които ще формираме изображение и функция, която ще върне тези символи. Нека вече да генерираме нашето изкуство.

Страхотен! Нашето изкуство е готово. Остава само да го покажете на потребителя.