来聊聊怎么用XHTML弄出“Chroma-keying”效果，就是给视频换个色，让它看上去像个虚拟场景。看好了，只需要俩canvas元素，再加些Javascript代码，最后搞下Chroma-key初始化就行！
body {
background: black;
color:#CCCCCC;
}
#c2 {
background-image: url(foo.png);
background-repeat: no-repeat;
}
p {
float: left;
border :1px solid #444444;
padding:10px;
margin: 10px;
background:#3B3B3B;
}
创建两个Canvas元素
我们先在XHTML文件里加上俩Canvas元素，命名为c1和c2。这就是用的Chroma-keying技术里的主角儿了。c1看原视频，c2处理过的画面。然后在c2上贴个静止图，把视频里的特定背景色改成其他的，就能做出虚拟场景合成的效果。
导入JavaScript代码
下面开始加入Javascript代码！别忘了把版本号加到1.8上，否则可能运行不出来。这个脚本里共有3种方法，最先出现的就是doLoad()。doLoad()这个家伙，你可以理解为XHTML文档刚刚打开时就会蹦出来。它主要是预先设置好我们用来处理颜色键的变量，还会设置一些侦听器，这样我们就能在用户观看视频时随时监控了。
doLoad: function() {
this.video = document.getElementById("video");
this.c1 = document.getElementById("c1");
this.ctx1 = this.c1.getContext("2d");
this.c2 = document.getElementById("c2");
this.ctx2 = this.c2.getContext("2d");
let self = this;
this.video.addEventListener("play", function() {
self.width = self.video.videoWidth / 2;
self.height = self.video.videoHeight / 2;
self.timerCallback();
}, false);
},
初始化Chroma-key
首先，我们要搞定下Chroma-key在加载阶段的准备工作，就在doLoad()这个方法里头。先得定位下XHTML文件里面的视频和那俩canvas元素在哪儿，瞅瞅他们上面画的是啥，坐标信息都记住哈。然后，给那个video元素加上个eventListener，一旦用户点击了”play”信号就能马上开始工作
timerCallback: function() {
if (this.video.paused || this.video.ended) {
return;
}
this.computeFrame();
let self = this;
setTimeout(function () {
self.timerCallback();
}, 0);
},
定时器回调
下次记得我们得一起搞定那个定时器回调函数里的图片帧。等视频开始放了，这个函数就能按照一定的速度把每幅画面加个很炫的Chroma-keying特效！开始之前，回调函数得判断一下是不是真的开始播放了；接着，要用到computeFrame()方法处理你现在看到的这张图；最后，用setTimeout()让它自动定期运行这些操作。
处理视频帧数据
computeFrame: function() {
this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
let l = frame.data.length / 4;
for (let i = 0; i 100 && r > 100 && b < 43)
frame.data[i * 4 + 3] = 0;
}
this.ctx2.putImageData(frame, 0, 0);
return;
}
这个神奇的方法叫Chromakey（调色）效果，可以把每一帧都记录起来，做出我们想要的效果。首先，要用canvasctx1画一幅缩小的图片，尺寸只有原来的一半。然后，掏出 getImageData()这个小助手，查看一下现在的画面截图中有多少个像素。最后，那就一个个地数这些像素，只要发现背景色和我们设定的背景图里的颜色相同，那么背景就可以变得透明！
搞定了，就是这样简单搞一下，每一帧都变成色度抠像的~其实这种技术对于做视频，还有造虚拟场景都挺有用的，看起来真实又有趣！
老铁们学学HTML5和Canvas，没事常逛技术网站留意下，保证你们学得停不下来，收获超多实用新技能！
评论0