使用代码实现刘畊宏本草纲目健身操
2022/05/06 14:43:44
先看效果图。
1 ，新建一个txt 文件 2 ，打开文件,复制源码进去 3 ，将 txt 后缀改成 html 4 ，打开文件 5 ，选择视频
源代码
<!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>
</head>
<body>
<div id="app">
<input type="file" id="button" />
<div class="text-box"></div>
<canvas id="canvas" style="display: none"></canvas>
<video controls autoplay muted class="video-box"></video>
</div>
<script>
const fontList = '!@9865432baco71'
const unit = 256 / fontList.length
window.onload = function () {
const { videoBox, textBox, fileBtn } = useGetNode()
const context = canvas.getContext('2d')
canvas.width = 480
canvas.height = 480
fileBtn.onchange = getFile
videoBox.oncanplay = function () {
window.interval = setInterval(() => {
draw(context, videoBox, textBox)
}, 10)
}
}
const useGetNode = () => {
return {
videoBox: document.querySelector('.video-box'),
textBox: document.querySelector('.text-box'),
canvas: document.querySelector('#canvas'),
fileBtn: document.querySelector('#button')
}
}
function getGray(r, g, b) {
return 0.299 * r + 0.578 * g + 0.114 * b
}
function toText(gray) {
return fontList[parseInt(gray / unit)]
}
const getFile = () => {
const { videoBox, fileBtn } = useGetNode()
if (!fileBtn) return
let file = fileBtn.files[0]
let src = URL.createObjectURL(file)
clearInterval(window.interval)
window.interval = null
videoBox.src = src
}
const draw = (context, video, target) => {
if (!video || !target || !context) return
let { videoWidth, videoHeight } = video
while (videoWidth > 480 || videoHeight > 480) {
videoWidth /= 1.2
videoHeight /= 1.2
}
video.height = videoHeight
video.width = videoWidth
context.drawImage(video, 0, 0, videoWidth, videoHeight)
let ImageData = context.getImageData(0, 0, videoWidth, videoHeight)
console.log(ImageData, 'ImageData')
let [imgDataArr, imgDataWidth, imgDataHeight] = [
ImageData.data,
ImageData.width,
ImageData.height
]
let html = ''
for (let h = 0; h < imgDataHeight; h += 3) {
let p = '<p>'
for (let w = 0; w < imgDataWidth; w += 3) {
let index = (w + imgDataWidth * h) * 4
let r = imgDataArr[index]
let g = imgDataArr[index + 2]
let b = imgDataArr[index + 3]
let gray = getGray(r, g, b)
p += toText(gray)
}
p += '</p>'
html += p
}
target.innerHTML = html
}
</script>
</body>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-size: 8px;
margin: 10px;
/* font-family: Menlo; */
font-family: 'Courier New';
font-family: monospace;
color: rgba(45, 45, 75, 0.96);
}
p {
height: 5px;
-webkit-transform-origin-x: 0;
}
span {
width: 5px;
}
.video-box {
visibility: hidden;
position: absolute;
bottom: 0;
}
</style>
</html>
1 ，新建一个txt 文件 2 ，打开文件,复制源码进去 3 ，将 txt 后缀改成 html 4 ，打开文件 5 ，选择视频
源代码
<!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>
</head>
<body>
<div id="app">
<input type="file" id="button" />
<div class="text-box"></div>
<canvas id="canvas" style="display: none"></canvas>
<video controls autoplay muted class="video-box"></video>
</div>
<script>
const fontList = '!@9865432baco71'
const unit = 256 / fontList.length
window.onload = function () {
const { videoBox, textBox, fileBtn } = useGetNode()
const context = canvas.getContext('2d')
canvas.width = 480
canvas.height = 480
fileBtn.onchange = getFile
videoBox.oncanplay = function () {
window.interval = setInterval(() => {
draw(context, videoBox, textBox)
}, 10)
}
}
const useGetNode = () => {
return {
videoBox: document.querySelector('.video-box'),
textBox: document.querySelector('.text-box'),
canvas: document.querySelector('#canvas'),
fileBtn: document.querySelector('#button')
}
}
function getGray(r, g, b) {
return 0.299 * r + 0.578 * g + 0.114 * b
}
function toText(gray) {
return fontList[parseInt(gray / unit)]
}
const getFile = () => {
const { videoBox, fileBtn } = useGetNode()
if (!fileBtn) return
let file = fileBtn.files[0]
let src = URL.createObjectURL(file)
clearInterval(window.interval)
window.interval = null
videoBox.src = src
}
const draw = (context, video, target) => {
if (!video || !target || !context) return
let { videoWidth, videoHeight } = video
while (videoWidth > 480 || videoHeight > 480) {
videoWidth /= 1.2
videoHeight /= 1.2
}
video.height = videoHeight
video.width = videoWidth
context.drawImage(video, 0, 0, videoWidth, videoHeight)
let ImageData = context.getImageData(0, 0, videoWidth, videoHeight)
console.log(ImageData, 'ImageData')
let [imgDataArr, imgDataWidth, imgDataHeight] = [
ImageData.data,
ImageData.width,
ImageData.height
]
let html = ''
for (let h = 0; h < imgDataHeight; h += 3) {
let p = '<p>'
for (let w = 0; w < imgDataWidth; w += 3) {
let index = (w + imgDataWidth * h) * 4
let r = imgDataArr[index]
let g = imgDataArr[index + 2]
let b = imgDataArr[index + 3]
let gray = getGray(r, g, b)
p += toText(gray)
}
p += '</p>'
html += p
}
target.innerHTML = html
}
</script>
</body>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-size: 8px;
margin: 10px;
/* font-family: Menlo; */
font-family: 'Courier New';
font-family: monospace;
color: rgba(45, 45, 75, 0.96);
}
p {
height: 5px;
-webkit-transform-origin-x: 0;
}
span {
width: 5px;
}
.video-box {
visibility: hidden;
position: absolute;
bottom: 0;
}
</style>
</html>