Как сгенерировать ascii art фотографию с веб-камеры с помощью Javascript

Содержание

1 Камера ASCII
2 Как это работает
3 демонстрация
4 Требования

Камера ASCII

Камера ASCII использует HTML5 getUserMedia API для преобразования видеопотока с вашей веб-камеры в представление ASCII в реальном времени. Вы можете использовать библиотеку без камеры, вы можете создать тот же эффект, рисуя изображение на холсте.

Демо работает с использованием 2 плагинов, camera.js (оболочка для доступа к камере и отображения ее на холсте) и ascii.js, самая важная часть демо. ascii.js — это крошечная библиотека, которая преобразует изображение холста в художественную строку.

Как это работает

Библиотека возвращает глобальный объект с именем ascii, у этого объекта есть только 1 свойство «fromCanvas». Эта функция ожидает в качестве первого параметра холст, который будет обрабатываться, а в качестве второго параметра — объект со свойствами.

var canvas = document.getElementById("myCanvasId");
ascii.fromCanvas(canvas, {
callback: function(asciiString) {
// Do something with the asciiString
}
});

Библиотека будет использовать следующие символы в строке ascii «.,:; I1tfLCG08 @».

var characters = (" .,:;i1tfLCG08@").split("");
var context = canvas.getContext("2d");
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var asciiCharacters = "";
// calculate contrast factor
// http://www.dfstudios.co.uk/articles/image-processing-algorithms-part-5/
var contrastFactor = (259 * (options.contrast + 255)) / (255 * (259 - options.contrast));
var imageData = context.getImageData(0, 0, canvasWidth, canvasHeight);

Затем он будет использовать цикл с полученными данными пикселей, используя getImageData Функция от холста и в соответствии с яркостью каждого пикселя (Яркость цвета определяется по следующей формуле: ((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000) персонаж из characters переменная будет выбрана для рисования (добавляется к asciiCharacters переменная).

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

демонстрация

Вы можете проверить живая версия от плагина здесь.

Обратите внимание, что вы можете использовать css для настройки и придания любопытных эффектов изображению. Предыдущее изображение было визуализировано с использованием css: color:blue; на предварительный элемент.

Вы можете настроить изменение отображаемых символов, например:

Предыдущее изображение было достигнуто путем изменения строки символов в ascii.js файл:

var characters = {
0:' ',
1:".",
2:",",
3:":",
4:";",
5:"i",
6:"1",
7:"t",
8:"f",
9:"L",
10:"C",
11:"G",
12:"0",
13:"8",
14:'@'
}

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

Требования

Ваш навигатор должен обеспечивать поддержку API getUserMedia
Соединение https, так как небезопасные соединения не разрешают доступ к API

Повеселись !