如何使用JavaScript从网络摄像头生成ascii艺术照片

本文概述

• 相机ASCII
• 如何运作
• 演示版
• 要求

相机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函数并根据每个像素的亮度对检索到的像素数据使用循环(颜色亮度由以下公式确定：((红色值X 299)+(绿色值X 587) +(蓝色值X 114))/ 1000)从characters变量中选择一个字符进行绘制(附加到asciiCharacters变量)。

注意：将更改图像的对比度以获得更好的结果, 你可以使用fromCanvas函数中的对比度参数来增加对比度。

演示版

你可以在此处从插件测试实时版本。

请注意, 你可以使用css来自定义图像并使图像具有奇特的效果。先前的图像已使用css渲染：color：blue;到前置元素。

你可以自定义更改正在渲染的字符, 例如：

更改了ascii.js文件中的字符行, 即可获得上一张图像：

var characters = {
        0:'<span style="background-color: yellow;"> </span>', 1:".", 2:", ", 3:":", 4:";", 5:"i", 6:"1", 7:"t", 8:"f", 9:"L", 10:"C", 11:"G", 12:"0", 13:"8", 14:'<span style="color: red;">@</span>'
}

请注意, 如果你使用相机而不是画布上的图像, 性能将会明显下降。

要求

• 你的导航器需要提供对getUserMedia API的支持
• https连接, 因为不安全的连接不允许访问API
  

玩得开心 ！