效果图：

代码：

<!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. maven打包问题

    <build> <finalName>项目名</finalName> <!-- 配置maven打包时过滤的文件 --> <resources> ...

  2. 如何在一台服务器上安装两个mysql或者更多

    如何在一台服务器上安装两个mysql 1       前言 上篇写了在一台机器上源码编译安装一个mysql,那么如何在一台机器上源码编译安装两个mysql或者更多呢? 2       环境 mysql ...

  3. js 函数

    函数:封装了某一块功能 四要素: 1.返回类型 2.函数名 3.参数列表4.函数体强类型语言 返回类型 函数名 首字母大写 参数列表string(字符串) Show (int a){ 函数体 }弱类型 ...

  4. H5+ 移动app学习之二 Native.js

    Native.js技术,简称NJS,是一种将手机操作系统的原生对象转义,映射为JS对象,在JS里编写原生代码的技术.如果说Node.js把js扩展到服务器世界,那么Native.js则把js扩展到手机 ...

  5. mysql主从配置

    引言: 双11,阿里云服务器打折,于是我忍不住又买了一台服务器,于是咱也是有两台服务器的爷们了,既然有了两台服务器,那么肯定要好好利用一下吧,那么就来玩玩mysql的主从配置吧. 准备 两台数据库服务 ...

  6. rman恢复报ORA-27039

    查看资源限制: AIX修改参数文件/etc/security/limits 如下: 重新su到用户下即可生效

  7. Error staring Tomcat Cannot connect to VM错误解决办法

    最近经常遇myEclipse以debug方式启动tomcat的错误提示如下: 直接run方式启动没有问题. 一般这个问题等一会就不再出现,如果有耐心的话,就等几分钟再启动.如果没有耐心,可以试试下面的 ...

  8. 解决 U 盘写保护的问题

    插了一个 U 盘,想格式化或者创建文件,但是提示我 U 盘是写保护的. 解决方法如下: Open a command prompt type DISKPART press type LIST VOLU ...

  9. Centos 6.5 X64 环境下编译 hadoop 2.6.0 --已验证

    Centos 6.5 x64 hadoop 2.6.0 jdk 1.7 protobuf-2.5.0 maven-3.0.5 set environment export JAVA_HOME=/hom ...

  10. zabbix 3.0 完全安装全解！

    环境准备: centos 6.5 x86_x64 安装依赖库文件 yum -y install mysql-devel net-snmp-devel curl curl-devel gcc pcre- ...