微信扫一扫 分享朋友圈

已有 121 人浏览分享

开启左侧

使用代码实现刘畊宏本草纲目健身操

[复制链接]
121 0
先看效果图。
image.png
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,海欣资源网所发布的资源由网友上传和分享,不保证信息的正确性和完整性,且不对因信息的不正确或遗漏导致的任何损失或损害承担责任。
2,海欣资源网的资源来源于网友分享,仅限用于学习交流和测试研究目的,不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。
3,海欣资源网所发布的资源由网友上传和分享,版权争议与本站无关,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。
4,如果您喜欢,请支持正版,购买正版,得到更好的正版服务,如有侵权,请联系我们删除并予以真诚的道歉,联系方式邮箱 haixinst@qq.com
海欣资源-企业信息化分享平台。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

0

关注

0

粉丝

28

主题
热度排行
回复排行
最新贴子

Archiver|手机版|小黑屋|海欣资源 ( 湘ICP备2021008090号-1 )|网站地图

GMT+8, 2022-10-3 09:27 , Gzip On, MemCache On.

免责声明:本站所发布的资源和文章均来自网络,仅限用于学习交流和测试研究目的,不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。 本站信息来自网络,版权争议与本站无关,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 如果您喜欢,请支持正版,购买正版,得到更好的正版服务,如有侵权,请联系我们删除并予以真诚的道歉。