0

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

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

4

1 回答 1

0

从 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>
于 2013-03-14T02:40:19.007 回答