<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <canvas id="canvas" width="400" height="300"></canvas>

 <script src="main.js"></script>

 </body>

 </html>
 (function () {

     var videoWidth = 320;

     var videoHeight = 240;

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

     var memoryCanvas = document.createElement("canvas");

     memoryCanvas.width = 400;

     memoryCanvas.height = 300;

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

     var memoryContext = memoryCanvas.getContext("2d");

     var targetBitmap = memoryContext.createImageData(videoWidth, videoHeight);

     /**

      * @type {HTMLVideoElement}

      */

     var video;

     function loadVideo() {

         video = document.createElement("video");

         video.autoplay = true;

         video.src = "12.mp4";

     }

     function render() {

         // context.drawImage(video, 0, 0);

         memoryContext.drawImage(video, 0, 0);

         var sourceImageData = memoryContext.getImageData(0, 0, videoWidth, videoHeight);

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

             var r = sourceImageData.data[i];

             var g = sourceImageData.data[i + 1];

             var b = sourceImageData.data[i + 2];

             var c = (r + g + b) / 3;

             targetBitmap.data[i] = c;

             targetBitmap.data[i + 1] = c;

             targetBitmap.data[i + 2] = c;

             targetBitmap.data[i + 3] = 255;

         }

         context.putImageData(targetBitmap, 0, 0);

         requestAnimationFrame(render);

     }

     function init() {

         loadVideo();

         render();

     }

     init();

 })();

canvas调节视频颜色的更多相关文章

  1. html、canvas、视频灰度、反色

    效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. [HTML5 Canvas学习]使用颜色和透明度

    在canvas中使用颜色和透明度,通过context的strokeStyle和fillStyle属性设置,strokeStyle和fillStyle的值可以是任意有效的css颜色字串.可以用RGB.R ...

  3. 用canvas给视频图片添加特效

    Canvas制作视频图片特效 1. Canvas介绍 1.1Canvas是html5上的一个画布标签,功能有点类似java的swing.可以在canvas上画线条 弧线, 文字 就是画布的功能. 具体 ...

  4. HTML5 Canvas 中的颜色、样式和阴影的属性和方法

    颜色.样式和阴影的属性与方法 fillStyle                设置或返回用于填充绘画的颜色.渐变或模式 strokeStyle         设置或返回用于笔触的颜色.渐变或模式 ...

  5. canvas实现视频截图

    截取视频当前播放画面,直接上源码. <body> <div class="container"> <video id="test" ...

  6. 用Canvas做视频拼图

    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 几天前同事给我看了一个特效,是一个拼图游戏,不同的是,拼图里的是动画.他让我看下做个DEMO,于是就自己整了一会,也确实不难.用canva ...

  7. CSS canvas 捕捉视频video元素截图

    video元素介绍: http://www.runoob.com/html/html5-video.html https://developer.mozilla.org/zh-CN/docs/Web/ ...

  8. canvas线性变换、颜色和样式选择

    1.应用不同的线型 ctx.lineWidth = value; 线条的宽度,默认为1 ctx.lineCap = type; 设置端点样式, type默认为butt,可选值round,square, ...

  9. canvas学习笔记（中篇） -- canvas入门教程-- 颜色/透明度/渐变色/线宽/线条样式/虚线/文本/阴影/图片/像素处理

    [中篇] -- 建议学习时间4小时  课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...

随机推荐

  1. MVC系列之一 入门概述

    一 概述 MVC作为一种当前比较好的开发web的框架,不得不提一下了,和WebForm比较来看,有了很大的进步和改进. 先进行一个简单的比较,两个都是Web开发框架,理念仍然是较快速开发. 不过MVC ...

  2. C++vector迭代器失效的问题

    转载:http://blog.csdn.net/olanmomo/article/details/38420907 转载:http://blog.csdn.net/stpeace/article/de ...

  3. 关于directX最近的学习方案

    目标:弄清楚如何渲染一个地形,以及人物坐标以及摄像机方向,弄清四大矩阵原理 实践: 1.再次学习矩阵相关知识 2.实现红龙本书的地形 3.搜寻这方面资料书籍

  4. 终端、shell、bash的区别联系

    最佳答案 终端,即所谓的命令行界面,又称命令终端,用户输入shell命令用的窗口,跟Windows里的DOS界面差不多. shell,Shell就是用户和操作系统之间的壳,中介,GUI和CLI都算是S ...

  5. MyBatis Mapper 接口如何通过JDK动态代理来包装SqlSession 源码分析

    我们以往使用ibatis或者mybatis 都是以这种方式调用XML当中定义的CRUD标签来执行SQL 比如这样 <?xml version="1.0" encoding=& ...

  6. windows下安装zabbix_agents_2.2.0

    下载与解压 下载zabbix_agents_2.2.0 http://www.zabbix.com/downloads/2.2.0/zabbix_agents_2.2.0.win.zip 解压到C盘下 ...

  7. [资源] Resources on Self-Driving Car

    Talk NVIDIA at CES 2016 - Self Driving Cars and Deep Learning GPUs Projects Autoware Open-source sof ...

  8. Windows Internals学习笔记（四）Trap Dispatching

    参考资料: 1. <Windows Internals> 知识点: ● 陷阱trap:它是一种处理器机制,用以在某一异常或中断出现时,捕捉该执行线程,并将其控制权转交到操作系统中某一固定位 ...

  9. git学习笔记03-本地git常用操作及原理-文件增删改

    1.查看git状态 git status  这个可以告诉我们对git做了哪些操,比如增删改 2.既然我们修改了东西,有的时候想看看修改了什么,毕竟我们的记忆力并不如电脑 git diff 文件名 (默 ...

  10. C#中Monitor和Lock以及区别

    Monitor对象 1.Monitor.Enter(object)方法是获取锁,Monitor.Exit(object)方法是释放锁,这就是Monitor最常用的两个方法,当然在使用过程中为了避免获取 ...