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

Камера 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.

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

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

Ascii Camera Demo

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

Читайте также:  Начало работы со стеганографией (скрыть информацию) на изображениях с C #

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

Ascii color css

Предыдущее изображение было достигнуто путем изменения строки символов в 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

Повеселись !

Ссылка на основную публикацию
Adblock
detector