canvas像素操作之视频滤镜（存疑）
2019-10-15 本文已影响0人
_南宫逸轩
视频实时变灰
由于本篇文章笔者对一些地方存在疑问，不能解答，所以此文暂且作一个备份，有兴趣的可以琢磨琢磨：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
background: gray;
text-align: center;
}
video{
margin: 0 auto;
}
</style>
<script>
window.onload = function () {
let c1 = document.getElementsByTagName('canvas')[0];
let gd = c1.getContext('2d');
let v1 = document.getElementById('vid');
requestAnimationFrame(next);
function next(){
gd.drawImage(v1, 0, 0,850,478);
let oData=gd.getImageData(0,0,c1.width,c1.height);
for(let r=0;r<c1.height;r++){
for(let c=0;c<c1.width;c++){
oData.data[4*(r*c1.width+c)+0]=
oData.data[4*(r*c1.width+c)+1]=
oData.data[4*(r*c1.width+c)+2]=
(oData.data[4*(r*c1.width+c)+0]+oData.data[4*(r*c1.width+c)+1]+oData.data[4*(r*c1.width+c)+2])/3;
}
}
gd.putImageData(oData,0,0);
requestAnimationFrame(next);
}
}
</script>
</head>
<body>
<video src="test.mp4" id="vid" autoplay controls loop width="850" style="display: block;">your browser does not support the video tag</video>
<canvas width="850" height="478" style="background:white;"></canvas>
</body>
</html>
