不是男模请不起，而是千锋更有 性 ～ 价 ～ 比 ！
小伙伴们不要羡慕别人，我们千锋也有自己的 “显眼包” ！
科目三 ～～ 走起 ！
非常简单的一段代码
让你也可以一起欢乐起来
谁说程序员都是四肢不协调
谁说我们来不了科目三
我们想跳什么跳什么
代码实现非常之简单
1. 先来一个布局
● 准备三个容器即可
○ 放置视频的容器
○ 小人跳舞的容器
○ canvas 画布（ 不需要出现在页面上，用来采集视频每一帧的像素点 ）
<!-- 放置视频容器 -->
<div class="ex">
<video src="./002.mp4" controls autoplay></video>
</div>
<!-- 出现跳舞小人的容器 -->
<div class="drop"></div>
<!-- 画布，不需要显示在页面上，用来采集视频内每一帧的像素点 -->
<canvas width="400" height="300">
您的浏览器不支持 canvas 画布, 请更换高版本浏览器后重试 ! ^_^
</canvas>
● 至于样式，你自己按照爱好搞一搞就可以了
2. 逻辑上先准备一个计算灰度的功能函数
● 因为实现的原理就是根据视频中每一帧的画面内，每一个像素点的对比度
● 计算像素点灰度，颜色重的就用一个比较复杂的符号，颜色浅的就用一个比较简单的符号就好了
// 根据 rgb 计算灰度
function getGray(r, g, b) {
return 0.299 * r + 0.578 * g + 0.114 * b
}
3. 在准备一个根据灰度返回不同文字的功能函数
// 根据灰度返回对应的文字
function toText(g) {
if (g <= 30) {
return '#'; // #
} else if (g > 30 && g <= 60) {
return '%'; // %
} else if (g > 60 && g <= 90) {
return '&'; // &
} else if (g > 90 && g <= 90) {
return 'm'; // m
} else if (g > 120 && g <= 150) {
return 'h'; // h
} else if (g > 150 && g <= 180) {
return 'n'; // n
} else if (g > 180 && g <= 210) {
return '!'; // !
} else if (g > 210 && g <= 240) {
return ':'; // :
} else {
return '.';
}
}
4. 开始实现功能
const canvas = document.querySelector('canvas')
const video = document.querySelector('video')
const drop = document.querySelector('.drop')
const ctx = canvas.getContext('2d')
video.ontimeupdate = function () {
function handler() {
// 清空当前画面
ctx.clearRect(0, 0, 430, 240)
// 拿到当前视频这一帧的内容当做图片插入到画布上
ctx.drawImage(video, 0, 0, 430, 240)
// 调用 init 函数，计算这一帧画面应该显示的文本，显示在跳舞的容器内
init(ctx, ctx.canvas.width, ctx.canvas.height)
}
// 利用 requestAnimationFrame 随着音乐更新内容
requestAnimationFrame(handler);
}
function init(ctx, width, height) {
const imgData = ctx.getImageData(0, 0, width, height)
const imgArr = imgData.data
const imgWidth = imgData.width
const imgHeight = imgData.height
// 可以个人根据视频画面的大小，计算一个取像素点的数字即可
// 如果每一个像素点都要，没有必要，因为很多时候，相邻的两个像素点没差多少
// 我这里就是横向每 6 个像素点截取一个，纵向每 4个像素点截取一个
let str = ''
for (let i = 0; i < imgHeight; i += 6) {
str += '<p>'
for (let j = 0; j < imgWidth; j += 3) {
const index = (j + imgWidth * i) * 4
const r = imgArr[index + 0]
const g = imgArr[index + 1]
const b = imgArr[index + 2]
str += toText(getGray(r, g, b))
}
str += '</p>'
}
// 将组装好的内容放在页面内
drop.innerHTML = str
}
● 到这里，打开浏览器看吧，效果已经实现了
是不是非常简单
现在加入我们，还有更多好玩的东西等着你
尤其是最近，我们推出了鸿蒙课程
设计了非常多好玩的案例
让你的开发快乐起来
