У цій публікації ми розглянемо функцію, яка дозволяє створювати кольорові ASCII-зображення з будь-якого зображення за допомогою JavaScript.
<div id="colored-ascii-art"></div>
#ascii-art{
font-family: monospace;
font-size: 10px;
line-height: 1;
white-space: pre;
overflow: scroll;
}
function imageToColoredAscii(imageUrl,targetElementId, charPix, width){
var img = new Image();
img.src = imageUrl;
img.onload = function(){
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var aspectRatio = img.width / img.height;
canvas.width = width;
canvas.height = width / aspectRatio;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var coloredAscii = '';
for (var i = 0; i < imageData.data.length; i += 4){
var r = imageData.data[i];
var g = imageData.data[i + 1];
var b = imageData.data[i + 2];
var avg = (r + g + b) / 3;
var charColor = 'rgb(' + r + ',' + g + ',' + b + ')';
var char = '<span style="color:' + charColor + '">'+charPix+'</span>';
coloredAscii += char;
if ((i + 4) % (canvas.width * 4) === 0) coloredAscii += '<br>';
}
document.getElementById(targetElementId).innerHTML = coloredAscii;
};
}
// Приклад використання:
imageToColoredAscii('/dani/test.png', 'colored-ascii-art', '@', 100);
Функція imageToColoredAscii дозволяє легко створювати кольорові ASCII-зображення з будь-якого зображення.
- Функція приймає чотири параметри:
- imageUrl - URL-адреса зображення, яке потрібно перетворити у ASCII-графіку.
- targetElementId - ідентифікатор HTML-елемента, в якому буде відображено ASCII-зображення.
- charPix - символ ASCII, який використовується для відображення кожного пікселя зображення.
- width - ширина ASCII- зображення у символах.
- Функція imageToColoredAscii виконує такі дії:
- Завантаження зображення: Створюється новий об'єкт зображення, який завантажується з вказаного URL.
- Створення canvas: Створюється новий елемент <canvas>, який використовується для малювання зображення.
- Малювання зображення: Завантажене зображення малюється на полотні canvas.
- Отримання даних зображення: Отримуються дані про кольори кожного пікселя зображення з полотна canvas.
- Створення ASCII-графіки: Для кожного пікселя обчислюється середнє значення кольору, яке використовується для визначення відповідного символу ASCII з відповідним кольором. Отримані символи ASCII додаються до рядка ASCII-зображення.
- Відображення результату: Отримане ASCII-зображення з використанням кольорових символів встановлюється у вказаний HTML-елемент.
Розберемо функцію imageToColoredAscii крок за кроком та пояснимо кожен її фрагмент:
Завантаження зображення
function imageToColoredAscii(imageUrl, targetElementId, charPix, width){
var img = new Image(); // Створення нового об'єкту зображення
img.src = imageUrl; // Встановлення URL-адреси для зображення
img.onload = function() { // Обробка події завантаження зображення
В цьому фрагменті ми створюємо новий об'єкт зображення та вказуємо йому URL-адресу зображення, яке потрібно перетворити на ASCII-графіку. Після завантаження зображення виконується обробник onload, який виконується, коли зображення повністю завантажено.
Створення canvas
var canvas = document.createElement('canvas'); // Створення елементу canvas для малювання
var ctx = canvas.getContext('2d'); // Отримання контексту малювання для canvas
var aspectRatio = img.width / img.height; // Визначення відношення сторін зображення
canvas.width = width; // Встановлення ширини canvas
canvas.height = width / aspectRatio; // Розрахунок висоти canvas з урахуванням відношення сторін
Тут ми створюємо елемент <canvas>, який використовується для малювання зображення, та отримуємо контекст малювання для цього полотна canvas. Ми також встановлюємо ширину та висоту canvas, забезпечуючи, щоб зображення зберігало свої пропорції.
Малювання зображення
ctx.drawImage(img, 0, 0, canvas.width, canvas.height); // Малювання зображення на полотні canvas
В цьому рядку коду ми малюємо завантажене зображення на полотні canvas за допомогою метода drawImage().
Отримання даних зображення
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); // Отримання даних про кольори пікселів
Отримуємо дані про кольори кожного пікселя зображення за допомогою метода getImageData().
Створення ASCII-графіки
var coloredAscii = ''; // Ініціалізація рядка ASCII-графіки
for (var i = 0; i < imageData.data.length; i += 4) { // Ітерація через кожен піксель
var r = imageData.data[i]; // Компонента червоного кольору
var g = imageData.data[i + 1]; // Компонента зеленого кольору
var b = imageData.data[i + 2]; // Компонента синього кольору
var avg = (r + g + b) / 3; // Обчислення середнього значення кольору пікселя
var charColor = 'rgb(' + r + ',' + g + ',' + b + ')'; // Створення рядка з колірним значенням
var char = '<span style="color:' + charColor + '">' + charPix + '</span>'; // Створення символу ASCII з відповідним кольором
coloredAscii += char; // Додавання символу ASCII до рядка ASCII-графіки
if ((i + 4) % (canvas.width * 4) === 0) coloredAscii += '<br>'; // Додавання тегу перенесення рядка
}
document.getElementById(targetElementId).innerHTML = coloredAscii; // Встановлення ASCII-графіки у вказаний HTML-елемент
В цьому фрагменті коду ми проходимо через кожен піксель зображення і перетворюємо його у відповідний символ ASCII, забарвлюючи його відповідно до кольору пікселя. Для кожного пікселя обчислюється середнє значення кольору, і на його основі визначається кольоровий символ, який потім додається до рядка ASCII-графіки. Якщо ми досягли кінця рядка, додаємо тег перенесення рядка для правильного відображення. Нарешті, встановлюємо отриманий рядок ASCII-графіки у вказаний HTML-елемент за допомогою метода innerHTML.