canvas处理视频

coderzhouyujavascriptcanvas
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<video controls src="video.ogv" id="v"></video>
<canvas id="mp4"></canvas>

<script>
    const v = document.getElementById("v")
    const canvas = document.getElementById("mp4")
    const ctx = canvas.getContext("2d")
    canvas.width = v.offsetWidth
    canvas.height = v.offsetHeight
    v.addEventListener("play", function () {
        var i = window.setInterval(function () {
            ctx.drawImage(v, 0, 0)
            const imgData = ctx.getImageData(0, 0, v.offsetWidth, v.offsetHeight).data

            ctx.fillStyle = "#ffffff"
            ctx.fillRect(0, 0, v.offsetWidth, v.offsetHeight)

            // 图片绘制 需要使用两个循环 一个绘制 x  一个绘制 y
            for (let y = 0; y < v.offsetHeight; y = y + 2) {
                for (let x = 0; x < v.offsetWidth; x = x + 1) {

                    let i = (x + y * v.offsetWidth) * 4
                    let r = i
                    let g = i + 1
                    let b = i + 2
                    let a = i + 3

                    if (r > 140 && r < 180 && b >20 && b<50) {
                        ctx.fillStyle = "#ffffff"
                    } else {
                        ctx.fillStyle = `rgba(${imgData[r]},${imgData[g]},${imgData[b]},${imgData[a]})`
                    }

                    ctx.fillRect(x, y, 1, 1)
                }
            }

            //当视频结束的时候去掉循环
            if (v.ended) {
                clearInterval(i)
            }
        }, 20);


    }, false)
</script>
</body>
</html>