ChromaKey Javascript性能下降

时间:2016-04-21 03:45:53

标签: javascript chromakey

下面的大家是我正在尝试使用JavaScript的色度键程序的代码。它确实滞后,质量不好。我想知道如何提高效率。我在下面发布了整个代码,但我确定问题在于代码中的while块。谢谢你的时间!

  window.ck= (function(_d){ 

 var _video= _d.getElementById('video'), 
     _canvas= _d.getElementById('canvas'), 
     _ctx= _canvas.getContext('2d'), 
     _n= navigator, 
     _w= window, 
     _width= 0, 
     _height= 0, 
     _tmpCtx     = _d.createElement('canvas'), 
     _range      = 80, 
     _colors     = [0, 0, 200]; 

 _tmpCtx.width= _canvas.offsetWidth; 
 _tmpCtx.height= _canvas.offsetHeight; 

 _tmpCtx= _tmpCtx.getContext('2d'); 

 var _videoPlaying= function(event){ 

     var frame= '', 
         data= null, 
         l, 
         r, g, b; 

     if(!_width){ 
         _width= _video.offsetWidth; 
         _height= _video.offsetHeight; 
     } 

     _tmpCtx.drawImage(_video, 0, 0, _width, _height); 

     frame= _tmpCtx.getImageData(0, 0, _width, _height); 
     data= frame.data; 

     **l= data.length/4; 
     while(l--){ 
         r= data[l*4]; 
         g= data[l*4+1]; 
         b= data[l*4+2]; 

         if(Math.abs(r-_colors[0]) < 250-_range 
             && 
            Math.abs(g-_colors[1]) < 250-_range 
             && 
            Math.abs(b-_colors[2]) < 250-_range) 
         { 
             frame.data[l*4+3]= 0; 
         } 

     } 

     _ctx.putImageData(frame, 0, 0); 
 };** 

 var _videoClick= function(evt){ 
     var line= evt.offsetY, 
         col= evt.offsetX, 
         frame= _ctx.getImageData(col, line, 1, 1), 
         px= [frame.data[0], frame.data[1], frame.data[2]]; 
     _colors= px; 
 }; 

 var _constructor= function(){ 
     _w.URL= _w.URL || _w.webkitURL; 
     _n.getUserMedia= _n.getUserMedia||_n.webkitGetUserMedia||_n.mozGetUserMedia||false; 

     if(_n.getUserMedia){ 
         _n.getUserMedia({ 
             audio: false, 
             video: true 
         }, function(stream){ 
             try{ 
                 stream= _w.URL.createObjectURL(stream); 
             }catch(e){ 
             } 

             _video.src= stream; 
             _video.play(); 

             _canvas.addEventListener('click', _videoClick); 
             setInterval(_videoPlaying, 120); 
             _video.style.visibility= 'hidden'; 

             _d.getElementById('range').addEventListener('change', function(){ 
                 _range= 255 - this.value; 
             }); 

         }, function(){ 
             //alert('nao permitiu'); 
         }); 
     }else{ 
         alert('falhou'); 
     } 

 } 

 return { 
     start: _constructor 
 }; 

})(document); 

0 个答案:

没有答案