html5 手机拍视频滤镜,用canvas实现图片滤镜效果附演示_html5教程技巧
这是一个很有意思的特效,模拟摄像机拍摄电视屏幕画面时出现点状颗粒的效果。颗粒的大小通过变换矩阵实现,可以任意调节,有兴趣研究的朋友可以尝试更多的效果,代码没有经过优化,只是一个粗糙的Demo,大家可以自行改进。
1.获取图像数据
复制代码代码如下:
img.src = ’http://bloglaotou.duapp.com/wp-content/themes/frontopen2/tools/filter/image2.jpg’;
canvas.width = img.width;
canvas.height = img.height;
var context = canvas.getContext(“2d”);
context.drawImage(img, 0, 0);
var canvasData = context.getImageData(0, 0, canvas.width, canvas.height);
2.设置过滤矩阵
复制代码代码如下:
var m_VideoType=0;
var pattern=new Array();
switch (m_VideoType)
{
case0://VIDEO_TYPE.VIDEO_STAGGERED:
{
pattern = [
0, 1,
0, 2,
1, 2,
1, 0,
2, 0,
2, 1,
];
break;
}
case1://VIDEO_TYPE.VIDEO_TRIPED:
{
pattern = [
0,
1,
2,
];
break;
}
case2://VIDEO_TYPE.VIDEO_3X3:
{
pattern =
[
0, 1, 2,
2, 0, 1,
1, 2, 0,
];
break;
}
default:
{
pattern =
[
0, 1, 2, 0, 0,
1, 1, 1, 2, 0,
0, 1, 2, 2, 2,
0, 0, 1, 2, 0,
0, 1, 1, 1, 2,
2, 0, 1, 2, 2,
0, 0, 0, 1, 2,
2, 0, 1, 1, 1,
2, 2, 0, 1, 2,
2, 0, 0, 0, 1,
1, 2, 0, 1, 1,
2, 2, 2, 0, 1,
1, 2, 0, 0, 0,
1, 1, 2, 0, 1,
1, 2, 2, 2, 0,
];
break;
}
}
var pattern_width = [ 2, 1, 3, 5 ];
var pattern_height = [6, 3, 3, 15 ];
3.获取过滤数据
复制代码代码如下:
for ( var x = 0; x < canvasData.width; x++) {
for ( var y = 0; y < canvasData.height; y++) {
// Index of the pixel in the array
var idx = (x + y * canvasData.width) * 4;
var r = canvasData.data[idx + 0];
var g = canvasData.data[idx + 1];
var b = canvasData.data[idx + 2];
var nWidth = pattern_width[m_VideoType];
var nHeight = pattern_height[m_VideoType];
var index = nWidth * (y % nHeight) + (x % nWidth);
index = pattern[index];
if (index == 0)
var r = fclamp0255(2 * r);
if (index == 1)
var g = fclamp0255(2 * g);
if (index == 2)
var b = fclamp0255(2 * b);
// assign gray scale value
canvasData.data[idx + 0] = r; // Red channel
canvasData.data[idx + 1] = g; // Green channel
canvasData.data[idx + 2] = b; // Blue channel
canvasData.data[idx + 3] = 255; // Alpha channel
// 加上黑色的边框
if(x < 8 || y < 8 || x > (canvasData.width - 8) || y > (canvasData.height - 8))
{
canvasData.data[idx + 0] = 0;
canvasData.data[idx + 1] = 0;
canvasData.data[idx + 2] = 0;
}
}
}
4.写入过滤后的数据
复制代码代码如下:
context.putImageData(canvasData, 0, 0);
5.参考资料
代震军ImageFilter开源项目
声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
html5 手机拍视频滤镜,用canvas实现图片滤镜效果附演示_html5教程技巧相关推荐
- html5 手机拍视频滤镜,还在用滤镜拍视频?这家手机支持一键视频美颜,效果不要太赞...
原标题:还在用滤镜拍视频?这家手机支持一键视频美颜,效果不要太赞 还有不到十天就是春节了,期待已久与家人团聚的时刻即将到来,在回家之后相信有不少人都会开启拍拍拍的模式,无论是拍照片还是拍短视频,只要是 ...
- html5 手机拍视频滤镜,如何给手机里拍摄的视频添加滤镜效果?在手机上给视频加滤镜|手机视频编辑器...
狸窝是帮助用户解决问题 提供教程解决方案 在这个过程中有使用我们自己开发的软件 也有网上找的工具 只要帮助用户解决问题就好!同意即往下继续了解下载 ... 眼看着2018快要结束啦,今日气温骤降,小编 ...
- android 实现相机防抖处理,手机拍视频怎么防抖?分享几个好用的防抖技巧,现在学起来不亏...
原标题:手机拍视频怎么防抖?分享几个好用的防抖技巧,现在学起来不亏 手机的作用是非常大的,比方说,我们可以用手机来聊天:还可以用手机来看小说:也可以用手机来查资料.当然最最重要的是手机可以用来拍照.拍 ...
- php画钟,canvas如何绘制钟表的方法_html5教程技巧
这篇文章主要介绍了HTML5中的canvas如何绘制钟表的方法的相关资料,小编觉得HTML真的是越来越强大的,现在分享给大家,也给大家做个参考.对HTML的小伙伴们可以一起跟随小编过来看看吧 本文介绍 ...
- 手机拍视频最怕抖,只能靠AI拯救了
视学算法报道 转载自:机器之心 编辑:陈萍.维度 视频画面的稳定与否,很大程度上影响着观感的舒适度!如何补偿视频抖动,拯救手抖党,来自台湾大学.谷歌等研究机构的学者,提出了防抖新算法,视频拍摄--稳. ...
- 手机怎么用外嵌字幕_今天才知道,手机拍视频还能添加字幕,方法太简单,看完就能学会...
很多人平时都喜欢拍视频,那么你们知道用手机拍摄视频,怎么给视频添加字幕吗?我想很多人都不知道吧,其实方法很简单,下面小编就来教大家,一起来看看吧. 方法一:微信 (1)看到微信,大家是不是还纳闷,微信 ...
- 小辣椒红辣椒7X手机刷机原厂维修线刷包附刷机教程
小辣椒红辣椒7X手机刷机原厂维修线刷包附刷机教程 红辣椒7X刷机包,小辣椒旗下的一个系列品牌机型,已经通过了手机维修的测试,可解决系统的不开机,死机,卡屏,不流畅,卡顿,黑屏等等的故障现象.资料内置刷 ...
- 长虹S16手机刷机原厂维修线刷包附刷机教程
长虹S16手机刷机原厂维修线刷包附刷机教程 长虹S16刷机包,来自手机售后的原厂的正版维修刷机包资料,测试完美刷机,可用于手机变砖维修,系统故障维修等. 长虹S16参数:这款机型拥有四摄像头,分别为前 ...
- 手机拍视频,实时换背景,继马卡龙玩图后,Versa又出了一款更厉害的App
郭一璞 发自 凹非寺 量子位 报道 | 公众号 QbitAI 在前不久荣耀9X的发布会上,一个名叫绿幕侠的App亮相了. 现场的展示中,这个App能让手机拍摄的视频,产生电影绿幕一般的效果,实时从视 ...
最新文章
- c4d+ps打造抽象NFT加密艺术 Create Abstract NFT Crypto Art with Cinema 4D + Photoshop
- 由浅入深解读Redis高级能力及性能调优
- Linux更新了源无法打开终端,在Deepin系统中检测不到升级的解决,需要切换系统源...
- python语言基础-Python语言基础与应用
- ssh端口映射,本地转发
- IIS6.0下配置HTTP Gzip压缩 提高iis相应速度
- mysql_unbuffered_query的_mysql_query与mysql_unbuffered_query的区别
- 《Java程序员面试宝典》读书笔记1
- loading怎么关闭 vant_vant-ui组件调用Dialog弹窗异步关闭操作
- formdata上传文件_关于multipart/formdata上传文件
- c语言整形符号位_C语言中32位有符号整数如何定义
- 【php】 布尔值判断
- HDU-ZZY的爱好
- 【C#】一文教你搭个简易的Socket服务器
- 《photoshopCS4中文版完全自学手册》视频教程
- Unity常见资源类型
- PS与CSS字间距转换
- 牛客练习赛97_D 月之暗面
- Codeforces 446C. DZY Loves Fibonacci Numbers (Fibonacci + 线段树)
- 基于盲估计和ICA的单通道盲分离算法–Matlab仿真
热门文章
- java 生产者消费者 demo_生产者与消费者--demo1---bai
- oracle证书洛阳,ORACLE手工建库
- linux+oracle+自动增量备份脚本,linux自动运行rman增量备份脚本
- Linux Shell脚本_禁止定时任务发送邮件
- WPS重复数据高亮显示
- 计算机网络的ip分配,IP地址分配_网络设备技术应用_太平洋电脑网PConline
- java 发送邮件_Jenkins实现自动化邮件发送踩坑记录
- CAD自控lisp_基于AutoLisp的AutoCAD二次开发自动生成系统图
- Python abs函数 - Python零基础入门教程
- BugkuCTF-Reverse题love