canvas调节视频颜色
<!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调节视频颜色的更多相关文章
- html、canvas、视频灰度、反色
效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- [HTML5 Canvas学习]使用颜色和透明度
在canvas中使用颜色和透明度,通过context的strokeStyle和fillStyle属性设置,strokeStyle和fillStyle的值可以是任意有效的css颜色字串.可以用RGB.R ...
- 用canvas给视频图片添加特效
Canvas制作视频图片特效 1. Canvas介绍 1.1Canvas是html5上的一个画布标签,功能有点类似java的swing.可以在canvas上画线条 弧线, 文字 就是画布的功能. 具体 ...
- HTML5 Canvas 中的颜色、样式和阴影的属性和方法
颜色.样式和阴影的属性与方法 fillStyle 设置或返回用于填充绘画的颜色.渐变或模式 strokeStyle 设置或返回用于笔触的颜色.渐变或模式 ...
- canvas实现视频截图
截取视频当前播放画面,直接上源码. <body> <div class="container"> <video id="test" ...
- 用Canvas做视频拼图
声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 几天前同事给我看了一个特效,是一个拼图游戏,不同的是,拼图里的是动画.他让我看下做个DEMO,于是就自己整了一会,也确实不难.用canva ...
- CSS canvas 捕捉视频video元素截图
video元素介绍: http://www.runoob.com/html/html5-video.html https://developer.mozilla.org/zh-CN/docs/Web/ ...
- canvas线性变换、颜色和样式选择
1.应用不同的线型 ctx.lineWidth = value; 线条的宽度,默认为1 ctx.lineCap = type; 设置端点样式, type默认为butt,可选值round,square, ...
- canvas学习笔记（中篇） -- canvas入门教程-- 颜色/透明度/渐变色/线宽/线条样式/虚线/文本/阴影/图片/像素处理
[中篇] -- 建议学习时间4小时 课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
随机推荐
- iOS深入学习（UITableView：系列1-最基本的东西）
这是UITableView博客系列的第一篇,使用xib和arc编码,主要讲解一些UITableView使用过程中简单的.但是又容易被忽略的东西,而且我会告诉读者,怎样在使用了之后就再也不会忘记. 操作 ...
- CodeForces 471C MUH and House of Cards
MUH and House of Cards Time Limit:1000MS Memory Limit:262144KB 64bit IO Format:%I64d & % ...
- Cheatsheet: 2013 06.23 ~ 06.30, Farewell GoogleReader(2008.07.20~2013.06.30)
Mobile Resources for Mac and iOS Developers- Introduction to Objective-C Modules Other 10 Principles ...
- awk 以HWI开头，并且：相邻两行的第一个字段完全相同；
## 思路:以HWI开头,并且:相邻两行的第一个字段完全相同:awk 'BEGIN{ last_col_1="xxxxxx"; last_row="bbbbbbbbbbb ...
- [UVa1213]Sum of Different Primes（递推，01背包）
题目链接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...
- IP地址验证
/** * 验证IP地址 * * @param 待验证的字符串 * @return 如果是符合格式的字符串,返回 <b>true </b>,否则为 <b>false ...
- （Theano 1）Theano自述文件
Theano在GitHub上的自述文件 https://github.com/Theano/Theano 也不知道这个Theano好不好,但是从Theano到Lasagne:基于Python的深度学习 ...
- Codeforces Round #257 (Div. 2) B
B. Jzzhu and Sequences time limit per test 1 second memory limit per test 256 megabytes input standa ...
- 随机内容生成（random模块）
摘抄于: 低调的python小子 当梦想照进现实 幸福近在咫尺 [jpg]http://ip.ipwind.cn/msn.png[/jpg] Python中的random模块用于生成随机数.下面介绍 ...
- bzoj 1588: [HNOI2002]营业额统计 treap
1588: [HNOI2002]营业额统计 Time Limit: 5 Sec Memory Limit: 162 MBSubmit: 13902 Solved: 5225[Submit][Sta ...