如何使用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 = http://www.srcmini.com/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> '}

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