效果图：

代码：

<!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的异常处理

    在所有的程序中,都会遇到异常,有些异常是代码编写的时候产生的,在前期过程中可能会直接导致程序无法运行.这一类的异常,在编写代码的时候,程序可以直接排查修改.但有些异常,是在程序运行过程中产生的,可能是 ...

  2. 数据复制与AA双活（1）

    最开始有些概念需要弄明白: 1. 什么是RPO? Wiki: https://en.wikipedia.org/wiki/Recovery_point_objective A recovery poi ...

  3. 【Java EE 学习 76 下】【数据采集系统第八天】【通过AOP实现日志管理】【日志管理功能分析和初步实现】

    一.日志管理相关分析 1.日志管理是一种典型的系统级别的应用,非常适合使用spring AOP实现. 2.使用日志管理的目的:对系统修改的动作进行记录,比如对权限.角色.用户的写操作.修改操作.删除操 ...

  4. (转)Excel的 OleDb 连接串的格式（连接Excel 2003-2013）

    string strCon = "Provider=Microsoft.ACE.OLEDB.12.0;data source=" + filePath + ";Exten ...

  5. WriteableBitmap 给透明的控件截图的问题

    在WP开发中,我们经常会用到截取某一部分区域,然后分享到微博等等,Writeablebitmap 是一个很好的辅助,但是它本身也有一个限制:只有一个 SaveJpeg 方法,因此透明的区域无法保存,都 ...

  6. 前端试题本（Javascript篇）

    JS1. 下面这个JS程序的输出是什么:JS2.下面的JS程序输出是什么:JS3.页面有一个按钮button id为 button1,通过原生的js如何禁用?JS4.页面有一个按钮button id为 ...

  7. UWP学习记录5-设计和UI之控件和模式2

    UWP学习记录5-设计和UI之控件和模式2 1.应用栏和命令栏 CommandBar 控件是一款通用.灵活.轻型的控件,可显示复杂内容(如图像或文本块)以及简单的命令(如 AppBarButton.A ...

  8. CentOS一键ftp

    # Version : 1.0 # Author : 果子 # Date : -- :: # Description : 只需要三步即可完成安装 # chmod a+x install_vsftpd. ...

  9. spin.js

    $ajax提交,菊花加载的方式和位置: $.ajax({ type: "get", url: "http://www.xxx.com/test.html", b ...

  10. Android 谈谈封装那些事 --BaseActivity 和 BaseFragment(二)

      1.前言 昨天谈了BaseActivity的封装,Android谈谈封装那些事--BaseActivity和BaseFragment(一)有很多小伙伴提了很多建议,比如: 通用标题栏可以自定义Vi ...