详解使用JS如何制作简单的ASCII图与单极图 - 行业资讯 - 肥雀云

在终端执行各种命令的时候经常会看到一些终端里显示出来的“图”片,远看仿佛一张图,近看则是一个个的ASCII码,它们大致长这样子

　　var canvasContext=canvas.getContext (2 d); 　　canvasContext。drawImage (sourceImg, 0, 0); 　　var imgData=https://www.yisu.com/zixun/canvasContext.getImageData (0, 0, sourceImg。宽度,sourceImg.height); 　　var imgDataArray=imgData.data; 　　　　

那么对于某一个像素点的RGBA值就可以这样获取

　　　　　　var r=imgDataArray [lineIndex]; 　　var g=imgDataArray [lineIndex + 1]; 　　var b=imgDataArray [lineIndex + 2]; 　　var=imgDataArray [lineIndex + 3]; 　　　　

其中lineIndex是遍历每一个像素点的基准变量。

灰度化,也就是获取像素点的灰度值。由于每一个像素点包含着RGBA四种信息,而我们需要将所有像素点的RGBA值分成8组,因此需要统一一下RGBA的值,最终得到一个值Y,而相应的像素点的RGBA值满足Y=R=G=B,在这里我们不考虑透明度α。由于RGB的值相等像素点颜色是介于白色与黑色之间的灰色,所以这一过程也称为灰度化。

灰度化算法有很多种,我们在这里采取最简单的方式,即

Y=(R + G + B) * 1/3
　　

相应代码如下

　　　　　　函数rgb2gray (r, g, b) { 　　返回r * 0.333 + g * 0.333 + b * 0.333; 　　}