新建txt文件,粘贴代码进去,保存后修改后缀名为html,运行即可。


<!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>
点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部