html - 是否可以对 html5 进行后期处理？

Question

再会

是否可以对 html5 进行后期处理？

我计划在我的背景上有一个带有现场 praps 的照相亭，例如在我的背景上是狂野的，然后在你拍照的时候有一只老虎在四处走动。

Answer 1

I think I know what you’re asking ?!

Canvas is quick enough to let you play video on the canvas and then draw a person’s picture on top of the moving video.

Here is some example code showing how to draw video into a canvas.

Then you would use the same canvas context to add a person’s photo to the video.

The effect is like having the weatherman "green screened" on top of the weather map.

<canvas id=c></canvas>
<video id=v controls loop>
    <source src=video.webm type=video/webm>
    <source src=video.ogg type=video/ogg>
    <source src=video.mp4 type=video/mp4>
</video>

<script>
    document.addEventListener('DOMContentLoaded', function(){
        var video = document.getElementById('v');
        var canvas = document.getElementById('c');
        var context = canvas.getContext('2d');

        var cw = Math.floor(canvas.clientWidth / 100);
        var ch = Math.floor(canvas.clientHeight / 100);
        canvas.width = cw;
        canvas.height = ch;

        video.addEventListener('play', function(){
            draw(this,context,cw,ch);
        },false);

    },false);

    function draw(video,canvasContext,w,h) {
        if(video.paused || video.ended) return false;
        c.drawImage(video,0,0,w,h);
        setTimeout(draw,20,video,canvasContext,w,h);
    }
</script>