JavaScript 实现字符视频画
大约 2 分钟
JavaScript实现字符视频画
一、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字符视频画</title>
<style>
body {display: flex;}
video, canvas {
border: 1px solid;
}
</style>
</head>
<body>
<video controls id="video" oncanplay="init()" loop src="abc.mp4" width="300"></video>
<canvas id="cvs"></canvas>
<canvas id="cvs2" onclick="video.play()"></canvas>
</body>
<script>
const init = () => {
// 定义canvas的实例
const ctx = cvs.getContext('2d')
const ctx2 = cvs2.getContext('2d')
// canvas的宽高与video同步（canvas1复制video，canvas2复制canvas2）
cvs.heigth = ctx2.heigth = video.offsetHeight
cvs.width = ctx2.width = video.offsetWidth
// 定义渲染函数
const playVideo = () => {
requestAnimationFrame(playVideo)
// 获取宽高
const {width, heigth} = cvs
// 将video复刻到canvas上
ctx.drawImage(video, 0, 0, width, heigth)
// 获取canvas1的源信息（包含每一个像素点的位置）
const data = ctx.getImageData(0, 0, width, heigth).data
// 渲染之前清空一下
ctx2.clearRect(0, 0, width, heigth)
// 定义一个稀释比例
const bl = 4
// 设置字体样式
ctx2.font = '8px serif'
// 下面+=4是因为存储是按rgba存储的，分别对应它的rgba
for (let i=0; i < data.length; i+=4 * bl) {
// 排列是按从左到右，所以按取余运算
const x = parseInt((i + 1)%(width * 4) / 4)
const y = parseInt(i / (width * 4))
// 确保像素点是在稀释过后的比例位上
if (x % bl === 0 && y % bl === 0) {
// rgba转灰度
const g = parseInt((data[i]+data[i+1]+data[i+2])/1.5)
ctx2.fillStyle = `rgba(${g}, ${g}, ${g}, ${data[i+3]})`
// 使用一个字符填充
ctx2.fillText('6', x, y)
}
}
}
playVideo()
}
</script>
</html>
注意事项
1、video如果无法播放请检查是否添加了controls属性，检查视频格式是否支持播放
2、虽然这是一个纯前端代码，但是如果直接打开是会报错的canvas跨域，所以需要跑在后端服务上的
二、效果
不方便放视频，就截个图吧，写代码也能当一个
ikun哦！
