canvas像素操作之视频滤镜（存疑）

视频实时变灰

由于本篇文章笔者对一些地方存在疑问，不能解答，所以此文暂且作一个备份，有兴趣的可以琢磨琢磨：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background: gray;
            text-align: center;
        }
        video{
            margin: 0 auto;
        }
    </style>
    <script>
        window.onload = function () {
            let c1 = document.getElementsByTagName('canvas')[0];
            let gd = c1.getContext('2d');
            let v1 = document.getElementById('vid');

            requestAnimationFrame(next);
            function next(){
                gd.drawImage(v1, 0, 0,850,478);
                let oData=gd.getImageData(0,0,c1.width,c1.height);
                for(let r=0;r<c1.height;r++){
                    for(let c=0;c<c1.width;c++){
                        oData.data[4*(r*c1.width+c)+0]=
                        oData.data[4*(r*c1.width+c)+1]=
                        oData.data[4*(r*c1.width+c)+2]=
                        (oData.data[4*(r*c1.width+c)+0]+oData.data[4*(r*c1.width+c)+1]+oData.data[4*(r*c1.width+c)+2])/3;
                    }
                }
                gd.putImageData(oData,0,0);
                requestAnimationFrame(next);
            }
        }
    </script>
</head>
<body>
    <video src="test.mp4" id="vid" autoplay controls  loop width="850" style="display: block;">your browser does not support the video tag</video>
    <canvas width="850" height="478" style="background:white;"></canvas>
</body>
</html>

canvas像素操作之视频滤镜（存疑）

视频实时变灰

推荐阅读更多精彩内容