HTML5 Canvas实战
3.7 视频反色
阅读(

路径和文本

图形及组合

处理图像和视频

绘制图像

裁剪图像

拷贝、粘贴画布的某部分

处理视频

获取图像数据

处理像素:图像反色

视频反色

本节旨在演示如何用跟处理图像差不多的方法,来处理视频的像素。本节,我们将对一小段视频剪辑进行反色处理。

视频反色
图3-8 视频反色

警告:由于getImageData()方法的安全限制,本节的例子必须在Web服务器上运行。

绘制步骤

按照以下步骤,对视频进行反色处理:

1. 创建一个跨浏览器的方法,该方法用来请求动画帧:

window.requestAnimFrame  =  (function(callback) {
    return window.requestAnimationFrame  ||
    window.webkitRequestAnimationFrame  ||
    window.mozRequestAnimationFrame  ||
    window.oRequestAnimationFrame  ||
    window.msRequestAnimationFrame  ||
    function(callback){
      window.setTimeout(callback,  1000  /  60);
    };
})();

2. 调用drawFrame()函数来捕获当前视频帧,反转其颜色,再把它绘制到画布。然后,请求一个新的动画帧:

function drawFrame(canvas, context, video) {
    context.drawImage(video,  0,  0);
    var imageData  = context.getImageData(0,  0, canvas.width, canvas.height);
    var data  = imageData.data;
    for  (var i  =  0; i  < data.length; i  +=  4)  {
      data[i]  =  255  - data[i];  // red 红
      data[i  +  1]  =  255  - data[i  +  1];  //绿
      data[i  +  2]  =  255  - data[i  +  2];  //蓝
      // i+3是透明度(第四个元素)
    }
    // 覆盖源图像
    context.putImageData(imageData,  0,  0);
    requestAnimFrame(function() {
      drawFrame(canvas, context, video);
    });
}

3. 定义上下文对象,获取视频标签,并绘制第一个动画帧:

window.onload = function(){
  var canvas  = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");
  var video   = document.getElementById("myVideo"); 
  drawFrame(canvas, context, video);
};

4. 在HTML文档的body部分嵌入canvas和video标签:

<video id="myVideo" autoplay="true" loop="true" style="display:none;">
  <source src="BigBuckBunny_640x360.ogv" type="video/ogg"/ >
  <source src="BigBuckBunny_640x360.mp4" type="video/mp4"/>
</video>
<canvas id="myCanvas" width="640" height="360" style="border:1px solid black;">
</canvas>

工作原理

跟上一节类似,我们可以使用跟处理图像差不多的方法,来处理视频的像素,因为不管上下文是如何被渲染的,getImageData()方法都能从画布上下文对象获取图像数据。本节,我们可以简单地反转画布上由requestAnimFrame()方法提供的每个视频帧的每个像素的颜色。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验