0

私がこれまでに持っているもの: http://sem.serialshop.nl/video/

私の目標は、ビデオ ピクセルを操作して、ボタンの 1 つをホバリングしたときに瞳孔内に対応する情報を表示することです。瞳孔内のピクセルを削除して、画像に置き換えることはできますか?

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 に答える