效果图：

代码：

<!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. CC2540串口输出调试功能

    可以用printf()做串口打印输出 这个功能非常简单,首先在工程管理下的preprocessor把串口打开HAL_UART=TRUE. 然后看我的npi.c文件,多了什么自己琢磨,懒点的就直接复制吧 ...

  2. ffmpeg 常用命令

    mp4中的h264编码,而h264有两种封装: 一种是annexb模式,传统模式,有startcode,SPS和PPS是在ES中:另一种是mp4模式,一般mp4.mkv.avi会没有startcode ...

  3. MVC Code First 自动生成数据库时生成的表名会多了一个s

    如图:我的类文件都是不带s的

  4. 数据库SQL语句优化小结

    网上查找的总结: 1.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索引而进行全表扫描,如: select id from t where num is null ...

  5. iOS JSON、NSDictionary互转

    #import "myCode.h" @implementation myCode /*! * @brief 把格式化的JSON格式的字符串转换成字典 * @param jsonS ...

  6. 前端实现图片懒加载(lazyload)的两种方式

    在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...

  7. webview页面缩放 & 自适应

    0.webview页面自适应: // 1.LayoutAlgorithm.NARROW_COLUMNS : 适应内容大小// 2.LayoutAlgorithm.SINGLE_COLUMN:适应屏幕, ...

  8. MS SQLServer 批量附加数据库 分类： SQL Server 数据库 2015-07-13 11:12 30人阅读 评论(0) 收藏

    ************************************************************ * 标题:MS SQLServer 批量附加数据库 * 说明:请根据下面的注释 ...

  9. NetMQ（三）： 发布订阅模式 Publisher-Subscriber

    ZeroMQ系列 之NetMQ 一:zeromq简介 二:NetMQ 请求响应模式 Request-Reply 三:NetMQ 发布订阅模式 Publisher-Subscriber 四:NetMQ ...

  10. java中的多线程

    什么是多线程? 首先得知道什么是线程? 线程是一组指令的集合,或者是程序的特殊段,它可以在程序里独立执行.也可以把它理解为代码运行的上下文.所以线程基本上是轻量级的进程,它负责在单个程序里执行多任务. ...