最近研究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);
});
