对于模糊图片这个效果的实现,其实css3中的filter属性也能够实现,但是这个属性的兼容性不是很好,所以我们通常不用这种方法实现,而使用canvas配合JS实现。

  1. <span style="white-space:pre">  </span>//高斯模糊  参数说明:width:canvas对象或者是数据体对象的宽,height:canvas或者是数据体对象的高,
  2. //radius:模糊取值半径(默认为3),sigma:方差取值(默认为1)
  3. /**
  4. * [Gaussian_blur description]
  5. * @param {[type]} data   [description]
  6. * @param {[type]} width  [description]
  7. * @param {[type]} height [description]
  8. * @param {[type]} radius [description]
  9. * @param {[type]} sigma  [description]
  10. */
  11. function Gaussian_blur(data, width, height, radius, sigma) {
  12. var gaussMatrix = [],
  13. gaussSum = 0,
  14. x, y,
  15. r, g, b, a,
  16. i, j, k, len;
  17. radius = Math.floor(radius) || 3;
  18. sigma = sigma || radius / 3;
  19. a = 1 / (Math.sqrt(2 * Math.PI) * sigma);
  20. b = -1 / (2 * sigma * sigma);
  21. //生成高斯矩阵
  22. for (i = 0, x = -radius; x <= radius; x++, i++) {
  23. g = a * Math.exp(b * x * x);
  24. gaussMatrix[i] = g;
  25. gaussSum += g;
  26. }
  27. //归一化, 保证高斯矩阵的值在[0,1]之间
  28. for (i = 0, len = gaussMatrix.length; i < len; i++) {
  29. gaussMatrix[i] /= gaussSum;
  30. }
  31. //x方向
  32. for (y = 0; y < height; y++) {
  33. for (x = 0; x < width; x++) {
  34. r = g = b = a = 0;
  35. gaussSum = 0;
  36. for (j = -radius; j <= radius; j++) {
  37. k = x + j;  a=j+row;
  38. if (k >= 0 && k < width) { //确保 k 没超出 x 的范围
  39. i = (y * width + k) * 4;
  40. r += data[i] * gaussMatrix[j + radius];
  41. g += data[i + 1] * gaussMatrix[j + radius];
  42. b += data[i + 2] * gaussMatrix[j + radius];
  43. gaussSum += gaussMatrix[j + radius];
  44. }
  45. }
  46. i = (y * width + x) * 4;
  47. data[i] = r / gaussSum;
  48. data[i + 1] = g / gaussSum;
  49. data[i + 2] = b / gaussSum;
  50. }
  51. }
  52. //y方向
  53. for (x = 0; x < width; x++) {
  54. for (y = 0; y < height; y++) {
  55. r = g = b = a = 0;
  56. gaussSum = 0;
  57. for (j = -radius; j <= radius; j++) {
  58. k = y + j;
  59. if (k >= 0 && k < height) { //确保 k 没超出 y 的范围
  60. i = (k * width + x) * 4;
  61. r += data[i] * gaussMatrix[j + radius];
  62. g += data[i + 1] * gaussMatrix[j + radius];
  63. b += data[i + 2] * gaussMatrix[j + radius];
  64. gaussSum += gaussMatrix[j + radius];
  65. }
  66. }
  67. i = (y * width + x) * 4;
  68. data[i] = r / gaussSum;
  69. data[i + 1] = g / gaussSum;
  70. data[i + 2] = b / gaussSum;
  71. }
  72. }
  73. return data;
  74. }

canvas高斯模糊算法的更多相关文章

  1. .net版高斯模糊算法

    最近挺多人找高斯算法,本人贴上一个高斯模糊算法类,希望可以帮助到大家.算法的效率还是可以接受的. #region 高斯模糊算法 /// <summary> /// 高斯模糊算法 /// & ...

  2. 简单的java高斯模糊算法

    import java.awt.Color; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOEx ...

  3. SSE图像算法优化系列二:高斯模糊算法的全面优化过程分享(一)。

    这里的高斯模糊采用的是论文<Recursive implementation of the Gaussian filter>里描述的递归算法. 仔细观察和理解上述公式,在forward过程 ...

  4. 高斯模糊算法的 C++ 实现

    2008 年在一个 PS 讨论群里,有网友不解 Photoshop 的高斯模糊中的半径是什么含义,因此当时我写了这篇文章: 对Photoshop高斯模糊滤镜的算法总结: 在那篇文章中,主要讲解了高斯模 ...

  5. 传统高斯模糊与优化算法(附完整C++代码)

    高斯模糊(英语:Gaussian Blur),也叫高斯平滑,是在Adobe Photoshop.GIMP以及Paint.NET等图像处理软件中广泛使用的处理效果,通常用它来减少图像噪声以及降低细节层次 ...

  6. webgl智慧楼宇发光效果算法系列之高斯模糊

    webgl智慧楼宇发光效果算法系列之高斯模糊 如果使用过PS之类的图像处理软件,相信对于模糊滤镜不会陌生,图像处理软件提供了众多的模糊算法.高斯模糊是其中的一种. 在我们的智慧楼宇的项目中,要求对楼宇 ...

  7. HTML5 实现图像模糊算法

    做个广告,WEB/PHP/JQ/HTML5/MYSQL/QQ群6848027 项目中需要用到HTML5模糊图像,以前用GDI,GDI+中都有现成的组件来实现,HTML5中如何实现? createIma ...

  8. Android高斯模糊

    传送门 github地址:http://developer.android.com/guide/topics/renderscript/compute.html: https://github.com ...

  9. Android开发学习之路-动态高斯模糊怎么做

    什么是高斯模糊? 高斯模糊(英语:Gaussian Blur),也叫高斯平滑,是在Adobe Photoshop.GIMP以及Paint.NET等图像处理软件中广泛使用的处理效果,通常用它来减少图像噪 ...

随机推荐

  1. hadoop学习笔记壹 --环境搭建及配置文件的修改

    Hadoop生态和其他生态最大的不同之一就是“单一平台多种应用”的理念了. hadoop能解决是什么问题: 1.HDFS :海量数据存储 MapReduce: 海量数据分析   YARN :资源管理调 ...

  2. ubuntu install pip

    ubuntu 安装pip sudo apt-get update sudo apt-get upgrade sudo apt-get install python-pip

  3. JavaScript设计模式 - 订阅发布模式(观察者模式)

    var Event = (function() { var global = this, Event, _default = 'default'; Event = function() { var _ ...

  4. leetcode56:Merge Intervals

    大都是自定义了 Interval的比较方法. 突发奇想 int [] arr=new int[intervals.Count*2]; for(int i=0;i<intervals.Count; ...

  5. C# 百度TTS,文本转语音,RestAPI之Get请求

    因为用得到,所以作个记录: 代码如下: public class BaiduTTSService : IBaiduTTSService { public string tok = GetBaiduTo ...

  6. [Spark][Python][DataFrame][SQL]Spark对DataFrame直接执行SQL处理的例子

    [Spark][Python][DataFrame][SQL]Spark对DataFrame直接执行SQL处理的例子 $cat people.json {"name":" ...

  7. 通过容器提交镜像(docker commit)以及推送镜像(docker push)笔记

    在本地创建一个容器后,可以依据这个容器创建本地镜像,并可把这个镜像推送到Docker hub中,以便在网络上下载使用. 查看镜像 [root@docker-test1 ~]# docker image ...

  8. GlusterFS分布式存储学习笔记

    分布式文件系统 分布式文件系统(Distributed File System)是指文件系统管理的物理存储资源并不直接与本地节点相连,而是分布于计算网络中的一个或者多个节点的计算机上.目前意义上的分布 ...

  9. React++ node.js ++SQL Sever ++MySQL++ python ++ php ++ java ++ c++ c#++ java ++ android ++ ios ++Linux+

    "C语言在它诞生的那个年代,是非常不错的语言,可惜没有OOP.当项目臃肿到一定程度,人类就不可控了. 为了弥补这个缺陷,C++诞生了.而为了应对各种情况,C++设计的大而全,太多复杂的特性, ...

  10. visual studio2013安装及测试

    visual studio2013自同学处拷贝安装至本机,由于安装包较大采用了双重压缩,解压时费了点时间,安装过程更是用了一个小时之久. 1.安装环境: 本机配置:Windows8,Intel(R)C ...