如果你有一个视频/照片,有一个简单的背景,这样我们会发现,如果你用的是绿色/蓝色屏幕或者平原的天空背景,您可以创建一个色度键效应。这与好莱坞电影剪辑特效制作或气象主持人替换背景,是相同的技术使用。

       我们将通过一些试验替换背景图像,甚至在一个视频上。

       使用技术：HTML5与javascript（jquery）。

       示例demo：背景色度键效应调节器

       示例左侧是图片原件，右侧是调整后的结果。下方是调节器，第一个是色差对比度调节，另一个是色度变化。鼠标移动滑动条变化，右侧图片随之变化。

       浏览器支持

       必须使用支持html5的浏览器，或者支持canvas标签使用。

       第一步：设置准备好的图片，添加canvas

       首先在网页中插入一张原件图片，然后创建一个canvas域，图片插入很简单：

<img id="source" src="html5.png" alt="HTML5" />

       接着使用javascript调用canvas：

var $canvasbg = $("<div id='target-container' />"); var canvas = $("<canvas class='greenscreen id='target' />").get(0); $canvasbg.append(canvas); $('body').append($canvasbg)

       我们还创建了一个<div>容器,这样我们就可以轻松地更改背景颜色无需更新整个画布。

       第二步：把图片放在canvas上

       现在我们使用drawImage()函数来将我们的图片加在画布上。我们在网页加载时触发onLoad事件,这样在我们试图做任何与它的事情之前，所有的图像数据会被加载。请注意,我们调整了canvas和div尺寸大小。

       如果顺利，你应该会得到下面的结果：

       第三步：遍历图像数据,并将绿色像素置为透明

       让绿色像素变为透明,我们将遍历图像的每个像素，读取它的红、绿、蓝Alpha值。如果像素是绿色的,然后我们将设置它的值为零。

var imageData = context.getImageData(0, 0, canvas.width, canvas.height); var data = imageData.data; var start = {     red: data[0],     green: data[1],     blue: data[2] }; // iterate over all pixels var tolerance = 150; for(var i = 0, n = data.length; i < n; i += 4) {     var diff = Math.abs(data[i] - data[0]) + Math.abs(data[i+1] - data[1]) + Math.abs(data[i+2] - data[2]);     if(diff < tolerance) {         data[i + 3] = 0;     } } context.putImageData(imageData, 0, 0); $canvasbg.css('background','#ABC123');

       如我们所想，所有绿色像素都变为透明，为我们下一步做调整做准备。效果如下：

       第四步：创建一些半透明像素

       前面的代码只是切换像素或关闭。我建议我们更新算法,让图像边缘更加柔和，设置对比度，根据相邻两个像素的比对来调整，经过一番试玩，得到了不错的效果：

var tolerance = 150; for(var i = 0, n = data.length; i < n; i += 4) {     var diff = Math.abs(data[i] - data[0]) + Math.abs(data[i+1] - data[1]) + Math.abs(data[i+2] - data[2]);     data[i + 3] = (diff*diff)/tolerance; }

       怎么样？还满意吧。

一起来试试吧，更多的运用到你的作品中。

       本文由HTML5Party编辑整理，转载请注明出处！