用canvas来把彩色的视频转换成黑白视频！

为什么80%的码农都做不了架构师？>>>   

最近研究html5 canvas，发现html canvas可以读取视频文件里面的帧并显示。 如下面代码所示： context.drawImage(video,0,0,canvas.width,canvas.height);

于是萌生一个想法,可以用来对视频进行一些比较有趣的处理，下面是一个用canvas实现的把彩色的视频处理成黑白视频，够文艺吧。原理就是，用canvas实时读出视频的帧数据然后通过程序转换成黑白图片并实时显示在cavnas，这样用户看到的讲是一个黑白视频:)，效果如下图所示:

上代码： <div> <div id = "video" style="display:block;"> <video id="tenvideo_video_player_0" autoplay="autoplay" width="200" height="200" src="video.mp4"></video> </div> <canvas id='vcanvas' width="200" height="200" "></canvas> </div>

   var video = document.getElementById('tenvideo_video_player_0');
   var canvas = document.getElementById('vcanvas');
   var context = canvas.getContext('2d');
   function animate(){
       if(!video.ended){
           context.drawImage(video,0,0,canvas.width,canvas.height);
  var imgdata=context.getImageData(0,0,canvas.width,canvas.height);
        var data=imgdata.data;
   for(var i=0,n=data.length;i<n;i+=4){
                var average=(data[i]+data[i+1]+data[i+2])/3;
                data[i]=average;
                data[i+1]=average;
                data[i+2]=average;
            }
context.putImageData(imgdata,0,0);
           window.requestAnimationFrame(animate);
       }
   }
   document.addEventListener('DOMContentLoaded', function(){
        video.addEventListener('play', function(){
                console.log('play');
                 window.requestAnimationFrame(animate);
        },false);
   });

专注移动的增量更新js框架

转载于:https://my.oschina.net/luyongfugx/blog/305041