canvas高斯模糊算法
对于模糊图片这个效果的实现,其实css3中的filter属性也能够实现,但是这个属性的兼容性不是很好,所以我们通常不用这种方法实现,而使用canvas配合JS实现。
- <span style="white-space:pre"> </span>//高斯模糊 参数说明:width:canvas对象或者是数据体对象的宽,height:canvas或者是数据体对象的高,
- //radius:模糊取值半径(默认为3),sigma:方差取值(默认为1)
- /**
- * [Gaussian_blur description]
- * @param {[type]} data [description]
- * @param {[type]} width [description]
- * @param {[type]} height [description]
- * @param {[type]} radius [description]
- * @param {[type]} sigma [description]
- */
- function Gaussian_blur(data, width, height, radius, sigma) {
- var gaussMatrix = [],
- gaussSum = 0,
- x, y,
- r, g, b, a,
- i, j, k, len;
- radius = Math.floor(radius) || 3;
- sigma = sigma || radius / 3;
- a = 1 / (Math.sqrt(2 * Math.PI) * sigma);
- b = -1 / (2 * sigma * sigma);
- //生成高斯矩阵
- for (i = 0, x = -radius; x <= radius; x++, i++) {
- g = a * Math.exp(b * x * x);
- gaussMatrix[i] = g;
- gaussSum += g;
- }
- //归一化, 保证高斯矩阵的值在[0,1]之间
- for (i = 0, len = gaussMatrix.length; i < len; i++) {
- gaussMatrix[i] /= gaussSum;
- }
- //x方向
- for (y = 0; y < height; y++) {
- for (x = 0; x < width; x++) {
- r = g = b = a = 0;
- gaussSum = 0;
- for (j = -radius; j <= radius; j++) {
- k = x + j; a=j+row;
- if (k >= 0 && k < width) { //确保 k 没超出 x 的范围
- i = (y * width + k) * 4;
- r += data[i] * gaussMatrix[j + radius];
- g += data[i + 1] * gaussMatrix[j + radius];
- b += data[i + 2] * gaussMatrix[j + radius];
- gaussSum += gaussMatrix[j + radius];
- }
- }
- i = (y * width + x) * 4;
- data[i] = r / gaussSum;
- data[i + 1] = g / gaussSum;
- data[i + 2] = b / gaussSum;
- }
- }
- //y方向
- for (x = 0; x < width; x++) {
- for (y = 0; y < height; y++) {
- r = g = b = a = 0;
- gaussSum = 0;
- for (j = -radius; j <= radius; j++) {
- k = y + j;
- if (k >= 0 && k < height) { //确保 k 没超出 y 的范围
- i = (k * width + x) * 4;
- r += data[i] * gaussMatrix[j + radius];
- g += data[i + 1] * gaussMatrix[j + radius];
- b += data[i + 2] * gaussMatrix[j + radius];
- gaussSum += gaussMatrix[j + radius];
- }
- }
- i = (y * width + x) * 4;
- data[i] = r / gaussSum;
- data[i + 1] = g / gaussSum;
- data[i + 2] = b / gaussSum;
- }
- }
- return data;
- }
canvas高斯模糊算法的更多相关文章
- .net版高斯模糊算法
最近挺多人找高斯算法,本人贴上一个高斯模糊算法类,希望可以帮助到大家.算法的效率还是可以接受的. #region 高斯模糊算法 /// <summary> /// 高斯模糊算法 /// & ...
- 简单的java高斯模糊算法
import java.awt.Color; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOEx ...
- SSE图像算法优化系列二:高斯模糊算法的全面优化过程分享(一)。
这里的高斯模糊采用的是论文<Recursive implementation of the Gaussian filter>里描述的递归算法. 仔细观察和理解上述公式,在forward过程 ...
- 高斯模糊算法的 C++ 实现
2008 年在一个 PS 讨论群里,有网友不解 Photoshop 的高斯模糊中的半径是什么含义,因此当时我写了这篇文章: 对Photoshop高斯模糊滤镜的算法总结: 在那篇文章中,主要讲解了高斯模 ...
- 传统高斯模糊与优化算法(附完整C++代码)
高斯模糊(英语:Gaussian Blur),也叫高斯平滑,是在Adobe Photoshop.GIMP以及Paint.NET等图像处理软件中广泛使用的处理效果,通常用它来减少图像噪声以及降低细节层次 ...
- webgl智慧楼宇发光效果算法系列之高斯模糊
webgl智慧楼宇发光效果算法系列之高斯模糊 如果使用过PS之类的图像处理软件,相信对于模糊滤镜不会陌生,图像处理软件提供了众多的模糊算法.高斯模糊是其中的一种. 在我们的智慧楼宇的项目中,要求对楼宇 ...
- HTML5 实现图像模糊算法
做个广告,WEB/PHP/JQ/HTML5/MYSQL/QQ群6848027 项目中需要用到HTML5模糊图像,以前用GDI,GDI+中都有现成的组件来实现,HTML5中如何实现? createIma ...
- Android高斯模糊
传送门 github地址:http://developer.android.com/guide/topics/renderscript/compute.html: https://github.com ...
- Android开发学习之路-动态高斯模糊怎么做
什么是高斯模糊? 高斯模糊(英语:Gaussian Blur),也叫高斯平滑,是在Adobe Photoshop.GIMP以及Paint.NET等图像处理软件中广泛使用的处理效果,通常用它来减少图像噪 ...
随机推荐
- hadoop学习笔记壹 --环境搭建及配置文件的修改
Hadoop生态和其他生态最大的不同之一就是“单一平台多种应用”的理念了. hadoop能解决是什么问题: 1.HDFS :海量数据存储 MapReduce: 海量数据分析 YARN :资源管理调 ...
- ubuntu install pip
ubuntu 安装pip sudo apt-get update sudo apt-get upgrade sudo apt-get install python-pip
- JavaScript设计模式 - 订阅发布模式(观察者模式)
var Event = (function() { var global = this, Event, _default = 'default'; Event = function() { var _ ...
- leetcode56:Merge Intervals
大都是自定义了 Interval的比较方法. 突发奇想 int [] arr=new int[intervals.Count*2]; for(int i=0;i<intervals.Count; ...
- C# 百度TTS,文本转语音,RestAPI之Get请求
因为用得到,所以作个记录: 代码如下: public class BaiduTTSService : IBaiduTTSService { public string tok = GetBaiduTo ...
- [Spark][Python][DataFrame][SQL]Spark对DataFrame直接执行SQL处理的例子
[Spark][Python][DataFrame][SQL]Spark对DataFrame直接执行SQL处理的例子 $cat people.json {"name":" ...
- 通过容器提交镜像(docker commit)以及推送镜像(docker push)笔记
在本地创建一个容器后,可以依据这个容器创建本地镜像,并可把这个镜像推送到Docker hub中,以便在网络上下载使用. 查看镜像 [root@docker-test1 ~]# docker image ...
- GlusterFS分布式存储学习笔记
分布式文件系统 分布式文件系统(Distributed File System)是指文件系统管理的物理存储资源并不直接与本地节点相连,而是分布于计算网络中的一个或者多个节点的计算机上.目前意义上的分布 ...
- React++ node.js ++SQL Sever ++MySQL++ python ++ php ++ java ++ c++ c#++ java ++ android ++ ios ++Linux+
"C语言在它诞生的那个年代,是非常不错的语言,可惜没有OOP.当项目臃肿到一定程度,人类就不可控了. 为了弥补这个缺陷,C++诞生了.而为了应对各种情况,C++设计的大而全,太多复杂的特性, ...
- visual studio2013安装及测试
visual studio2013自同学处拷贝安装至本机,由于安装包较大采用了双重压缩,解压时费了点时间,安装过程更是用了一个小时之久. 1.安装环境: 本机配置:Windows8,Intel(R)C ...