效果图：

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>canvas 视频颜色灰度化，反色</title>

    <style type="text/css">

       *{

           margin: 0;

           padding: 0;

       }

       #wrap{

           border: 1px solid #ccc;

       }

       #sourcevid{

           width: 400px;

           height: 400px;

           border: 1px solid #ccc;

       }

    </style>

</head>

<body>

    <video id="sourcevid" autoplay="true" loop="true" width="400" height="400">

        <source src="vodeo/daxiongtui(1).mp4" type="video/mp4"/>

        <source src="vodeo/daxiongtui.ogv" type="video/ogg"/>

    </video>

    <canvas id="wrap" width="400" height="400">你的浏览器不支持canvas！</canvas>

    <script type="text/javascript">

          //获取id

          var canvas = document.getElementById("wrap");

          var ctx = canvas.getContext("2d");

          var sourcevid = document.getElementById("sourcevid");

          sourcevid.oncanplaythrough = function() {

            function play() {

                //在画布里绘制出sourcevid

                ctx.drawImage(sourcevid,0,0);

                //反色

                //getImageData() 复制画布上指定矩形的像素数据

                //getImageData() 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。

                //对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：

                //R - 红色 (0-255)

                //G - 绿色 (0-255)

                //B - 蓝色 (0-255)

                //A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)

                //color/alpha 以数组形式存在，并存储于 ImageData 对象的 data 属性中。

                var imageData = ctx.getImageData(0,0,200,400);

                var t = imageData.data;

                for(var i = 0 ; i < t.length; i += 4) {

                    t[i] = 255 - t[i];

                    t[i+1] = 255 - t[i+1];

                    t[i+2] = 255 - t[i+2];

                    // t[i+3] = 255;

                }

                // putImageData() 将图像数据放回画布

                ctx.putImageData(imageData,200,0);

                //灰度

                var imageData = ctx.getImageData(0,0,200,400);

                var d = imageData.data;//保存的是红绿蓝透明度的通道的值

                    //console.log(imageData);

                for(var i = 0; i < d.length; i += 4) {

                    //var verage = (d[i] + d[i+1] + d[i+2])/3;

                    var verage1 = 0.299 * d[i] + 0.587 * d[i+1] + 0.114 * d[i+2]

                    d[i] = d[i+1] = d[i+2] = verage1;

                }

                ctx.putImageData(imageData,0,0);

                window.requestAnimationFrame(play);

            }

            play();

        }

    </script>

</body>

</html>

注：本例需在服务器上运行的才能看到效果、视频文件可换成本地视频（HBuilder有集成服务器或者使用wampmanager亦可）

html、canvas、视频灰度、反色的更多相关文章

  1. canvas简单处理图片(反色处理)

    用canvas可以简单地处理图像,比如切割 灰色处理等,今天记下的是图像的反色处理. <!DOCTYPE html> <html> <head> <meta ...

  2. [js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)

    接着上文[js高手之路] html5 canvas系列教程 - 状态详解(save与restore),相信大家都应该玩过美颜功能,而我们今天要讲的就是canvas强大的像素处理能力,通过像素处理,实现 ...

  3. canvas 图片反色

    代码实例: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <tit ...

  4. 前端每日实战：23# 视频演示如何用纯 CSS 创作一个菜单反色填充特效

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/qYMoPo 可交互视频教程 此视频是 ...

  5. 在YUV图像上根据背景色实现OSD反色

    所谓的OSD其实就是在视频图像上叠加一些字符信息,比如时间,地点,通道号等, 在图像上叠加OSD通常有两种方式: 一种是在前端嵌入式设备上,在图像数据上叠加OSD, 这样客户端这边只需解码显示数据即可 ...

  6. 如何用纯 CSS 创作一个菜单反色填充特效

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/qYMoPo 可交互视频教程 ...

  7. C#开发PACS医学影像处理系统(十八)：Dicom使用LUT色彩增强和反色

    在医生阅片确诊的过程中,当发线疑似病灶时在灰度显示下有时并不清晰,这时候就需要色彩增强效果来使灰度图像变为彩色图像. LUT可以简单的理解为0-255的颜色映射值,例如:彩虹编码,将其打包成LUT格式 ...

  8. iOS实现图像的反色,怀旧，色彩直方图效果

    反色是与原色叠加可以变为白色的颜色,即用白色(RGB:1.0,1.0,1.0)减去原色的颜色.比如说红色(RGB:1.0,0,0)的反色是青色(0,1.0,1.0).在OPENGL ES中为1. 通过 ...

  9. php对图片反色处理

    今天有个需求用php对图片进行反色,和转灰,之前不知道可不可行,后来看到了imagefilter()函数,用来转灰绰绰有余,好强大: imagefilter($im, IMG_FILTER_GRAYS ...

随机推荐

  1. python 装饰器

    #!/usr/bin/env python3 #-*-encoding:utf-8-*- def w3(*args, **kwargs): ') def w1(): def ww1(func): de ...

  2. UIAlertController使用

    // 将UIAlertController模态出来 相当于UIAlertView show 的方法// 初始化一个一个UIAlertController    // 参数preferredStyle: ...

  3. 【React】组件生命周期

    初始化阶段 getDefaultPropos:只调用一次,实力之间共享引用 getInitialState:初始化每个实例特有的状态 componentWillMount:render之前最后一次修改 ...

  4. winform快速开发平台 -> 通用权限管理之动态菜单

    这几个月一直忙APP的项目,没来得及更新项目,想想该抽出时间整理一下开发思路,跟大家分享,同时也希望得到宝贵的建议. 先说一下我们的权限管理的的设计思路,首先一个企业信息化管理系统一定会用到权限管理, ...

  5. NoSql数据库初探-mongoDB环境搭建

    NoSQL数据库一改关系型数据库的缺点,更容易的集成.分布式.无模式.故障恢复等特点,正在一步步餐食关系型数据库的市场,作为一个与时俱进的码农了解一下新技术是必须的,尤其是在读了<NoSql精粹 ...

  6. 控制台查看原生sql

    情况:当tomcat运行时,项目运行过程中,控制台没有打印出原生sql语句: 解决办法如下: 在 META-INF  文件夹下,查找 persistence.xml 这个文件(这里注意可能一个项目不止 ...

  7. STC系列STC10F芯片解密STC10L单片机破解复制技术

    STC系列STC10F芯片解密STC10L单片机破解 STC10F12XE | STC10F12 | STC10F10XE | STC10F10解密 STC10F08XE | STC10F08 | S ...

  8. 关于SVN出现 svn working copy locked的原因及解决方法

    今天使用SVN时电脑卡住了,于是结束进程中断了SVN的操作,于是出现了如题问题, 产生这种情况大多是因为上次svn更新命令执行失败且被自动锁定了. 如果cleanup没有效果的话只好手动删除锁定文件. ...

  9. FileStream

    允许其他进程只读打开 New FileStream("路徑", FileMode.Append, FileAccess.Write, FileShare.Read) 允许其他进程以 ...

  10. ubuntu 16.04 + N驱动安装 ＋CUDA+Qt5 + opencv

    Nvidia driver installation(after download XX.run installation file) 1. ctrl+Alt+F1   //go to virtual ...