基于 Canvas 技术把视频或图片转换成字符显示

在网上看到一个把图像转换成文字显示的视频，于是研究了一下，并记录下思路。

先贴上效果显示图：

1、先创建一个内存画布，把图片画上去，然后获取图片像素数据

2、通过数据将图片转换成灰度图像，也就是黑白照那种，没有颜色。在图像学中有一个转换公式就是 gray = ~~(R * 0.299 + G * 0.587 + B * 0.114); RGB 为像素的值

3、设置字符的宽高，计算每个字符对应的图像的区块灰度值，相当于把图片压缩。区块灰度值的计算为每个像素的灰度值相加除以像素数量

4、通过灰度值输出相应字符，还可以设置阈值进行效果控制，好比 PS 中的阈值特效一样，灰度值大于这个阈值就输出为空白

演示地址：https://www.tianlunvip.com/tool/imgtochar.html

	function toChars(context, width, height, rowChars) {
   
		var pixels = [],
			output = "",
			imageData = context.getImageData(0, 0, width, height),
			rowChars = width < rowChars ? width : rowChars,
			char_w = width / rowChars