效果图：

代码：

<!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. sh5.while 脚本练习

    脚本编程: 顺序结构 选择结构 if, case 循环结构 for,while,until while循环:适用于循环次数未知的场景 语法: while CONDITION;do statement ...

  2. 9. 了解 Cocoa-百度百科

    Cocoa是苹果公司为Mac OS X所创建的原生面向对象的API,是Mac OS X上五大API之一(其它四个是Carbon.POSIX.X11和Java). 苹果的面向对象开发框架,用来生成 Ma ...

  3. wpf TreeView

    <Window x:Class="WpfTutorialSamples.TreeView_control.TreeViewDataBindingSample"        ...

  4. ViewPager适配器FragmentStatePagerAdapter 与FragmentPagerAdapter

    使用FragmentPagerAdapter存在删除dataSet顺序错乱的问题 改用FragmentStatePagerAdapter

  5. Nginx 相关

    删除 access.log 之后,要让 Nginx 重新加载一下,命令 killall -s USR1 nginx 无需新建 access.log ,这个命令会自动创建该文件 Nginx 的日志文件轮 ...

  6. UE3名称结构（Name）

    解释说明: (1) 直接通过FName的index进行比较来判断两个FName是否相等 (2) 通过FName的index从全局Names数组中取出对应的FNameEntry,可以获得FName的字符 ...

  7. 【体系结构】动态调度算法：记分牌算法和tomasulo算法

    记分牌和tomasulo算法 动态调度: 通过硬件在程序执行时重新安排代码的执行序列来减少竞争引起的流水线停顿时间 动态调度流水线具备以下功能: (1)允许按序取多条指令和发射多条指令----取指(I ...

  8. 信鸽推送 .NET (C#) 服务端 SDK rest api 调用库(v1.2)

    信鸽推送 .NET  服务端 SDK rest api 调用库-介绍 该版本是基于信鸽推送v2版本的时候封装的,先拿出来与大家分享,封装还还凑合,不依赖其他http调用件,唯一依赖json序列化dll ...

  9. adt_sdk_tools介绍

    draw9patch.bat hierarchyviewer.bat traceview.bat

  10. iOS10以上关于访问权限设置

    记录一下: iOS对用户的安全和隐私的增强,在申请很多私有权限的时候都需要添加描述,但是,在使用Xcode 8之前的Xcode还是使用系统的权限通知框.要想解决这个问题,只需要在info.plist添 ...