今天讲一个比较有意思的东西:字符画视频,这个在抖音上也出现过:

字符画视频 gif 字符画视频

原文来自: 视频转字符画,一个大神写的,觉得比较好奇,研究学习了一下源码。

利用canvas绘制原视频

上面那个例子乍一看,无从下手,感觉很难的样子,其实我们可以先利用canvas去绘制一个普通的视频:

这里绘制视频的过程和普通的不太一样,普通的是点击视频后,我们监听video的play事件,然后利用requestAnimationFrame去绘制。

这里是通过不断的给video设置当前播放的时间点(currentTime),然后监听canplay事件去绘制当前视频上的图像。相比上面的,这种无需手动点击视频开始就可绘制:

绘制的时候,毋庸置疑的使用了requestAnimationFrame,这种方式的核心原则就是设置video的currentTime,通常requestAnimationFrame绘制的时间是16.7ms,但是考虑到了每次绘制计算可能会导致延迟,比如某次计算耗费了20ms,因此这里每次叠加的时间不是简单的加16.7ms,而是用这次绘制的时间减去上次绘制的时间差作为递增时间段。

当递增的时间段大于视频的总时长,那么就停止绘制。

绘制灰度视频

灰度视频的绘制主要是用现成的公式,将rgb三色图像转换成灰色:

正常播放视频的时候,canvas是直接绘制视频某个时间点的图像;灰度处理的时候,先要获取视频此刻所有的像素点,然后将每个像素点变成灰度,最后利用putImageData将像素点放回:

绘制字符画视频

字符画视频是在灰度视频的基础上绘制的,原理就是将计算出来的灰度,根据数值大小变成执行的字符串:

不过字符画绘制和灰度绘制的颗粒度不一样,灰度是要每个像素点都转换,而字符画只是转换部分,因为字符也要占空间,如果和灰度一样,每个像素都要计算,那么就会太密集。

createObjectURL兼容问题

目前在safaric上不兼容此效果,似乎是因为safaric上createObjectURL有问题,导致读取失败,video无法获取数据内容。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字