Question

到目前为止我所拥有的：http://sem.serialshop.nl/video/

我的目标是操纵视频像素，以便在悬停其中一个按钮时在瞳孔内显示相应的信息。我可以删除瞳孔内的像素，并将其替换为图像吗？

Answer 1

从mp4视频移除眼睛瞳孔的像素中删除像素

正如darma所说，你可以通过使用context.drawImage（）将你的图像叠加在瞳孔上来完成你的项目。这是你如何做到的。

此外，这里是你如何删除瞳孔的像素（如你所知）。

<强>背景

您可以拍摄mp4视频并将其逐帧绘制到画布中。

画布绘制速度足够快，结果看起来与拍摄视频一样好。

更有趣的是，您可以在绘制到画布中时操纵每个帧。这允许您获取瞳孔的像素并替换它们。

操纵像素：

通过使用context.getImageData（）将像素抓取到数据数组中来操纵画布框架。
然后以您想要的任何方式操纵数据数组。
最后，使用context.putImageData（）将修改后的数据数组放回画布中。
然后画布显示修改过的像素！

您的解决方案

为了解决您的问题，我们得到包含瞳孔的边界框。每当我们在边界框中看到近乎黑色的像素时，我们就知道它是瞳孔，我们可以修改那个近乎黑的像素。在下面的工作代码中，我们只是将像素从近乎黑色更改为纯红色。但是，你可以对瞳孔像素做任何你想做的事。

以下是绘制视频的代码，瞳孔像素为红色：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var centerX=315;
    var centerY=150;
    var radius=10;
    var rx=267;
    var ry=98;
    var rwidth=101;
    var rheight=95;

    var video = document.getElementById('vid');
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    var cw = 638;
    var ch = 358;
    canvas.width = cw;
    canvas.height = ch;

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

    function draw(video,context,w,h) {
        if(video.paused || video.ended) return false;
        context.drawImage(video,0,0,w,h);

        // at this point you could also draw a second image
        // into the pupil of the eye like this
        // context.drawImage(myImage,rx,ry,rwidth,rheight);

        // but what we do here is just put a red bounding box
        // around the pupil so that we can see we are 
        // properly focusing on the pupil area

        context.fillStyle="blue";
        context.strokeStyle="red";
        context.lineWidth=2;
        context.beginPath();
        context.rect(rx,ry,rwidth,rheight);
        context.stroke();
        extractPupil(context);
        setTimeout(draw,150,video,context,w,h);
    }

    function extractPupil(context){
        // get just the bounding rectangle of the pupil
        // NOT the whole canvas.
        var imgData=context.getImageData(rx,ry,rwidth,rheight);
        var data=imgData.data;
        for(var i=0;i<data.length;i+=4){

            // if the pixel color is nearly black--change it to red
            if(data[i]<20 && data[i+1]<20 && data[i+2]<20){
                data[i]=255;
                data[i+1]=0;
                data[i+2]=0;
            }

        }
        // put the modified pixels back into the canvas
        // Now the pupil is colored pure red!
        context.putImageData(imgData,rx,ry);
    }


}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas"></canvas>
    <video id="vid" controls loop>
        <source src="eye.mp4" type=video/mp4>
    </video>
</body>
</html>

如何从HTML 5视频中删除像素？

1 个答案: