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;
- }
转载于:https://www.cnblogs.com/ckAng/p/9334216.html
canvas高斯模糊算法相关推荐
- 基于正态分布的图片高斯模糊算法
前言: 先来看看下面这张图,我把一张图进行了二等份了,左边是经过高斯模糊过的,右边是原图. 图-1 高斯模糊效果对比图 概述: 高斯模糊也叫做高斯平滑,是一种图像平滑处理的技术.高斯模糊算法的原理是选 ...
- 高斯平滑算法 c语言,高斯模糊算法(gaussian)
项目上对图像处理需要用到点高斯算法,网上找到一篇对原理及部分问题分析讲解的还不错的文章,分享一下,后付自己的一段代码 - 理论 - 高斯分布函数可表示为一个一维的函数G(x) 或者一个二维的函数G(x ...
- 什么是高斯模糊算法?
通常,图像处理软件将提供模糊滤镜以使图像模糊. 有许多算法可以实现模糊,其中一种称为高斯模糊算法.它利用高斯分布来处理图像. 本文是介绍高斯模糊算法,你会发现这是一个简单的算法.实际上,它是一种可以在 ...
- 高斯模糊java代码_Java实现高斯模糊算法处理图像
高斯模糊(英语:Gaussian Blur),也叫高斯平滑,是在Adobe Photoshop.GIMP以及Paint.NET等图像处理软件中广泛使用的处理效果,通常用它来减少图像噪声以及降低细节层次 ...
- 高斯模糊java代码_Java 实现高斯模糊算法
接上篇文章<高斯模糊算法的原理>,本文我们借助 java 来实现高斯模糊算法,并使用高斯模糊算法处理实际图片. 高斯模糊就是图像和高斯函数的卷积.等价于傅里叶变换后乘上高斯函数再逆变换回来 ...
- 高斯模糊java代码_简单的java高斯模糊算法
importjava.awt.Color;importjava.awt.image.BufferedImage;importjava.io.File;importjava.io.IOException ...
- OpenCVSharp入门教程 基础篇⑤——GaussianBlur高斯模糊算法
文章目录 一.前文 二.GaussianBlur高斯模糊算法流程 三.界面布局 四.功能实现 4.1 打开图片 4.2 GaussianBlur高斯模糊-源码 4.3 GaussianBlur高斯模糊 ...
- Android NDK图片模糊处理之高斯模糊算法
效果图: 参考了c++的高斯模糊的算法 高斯模糊的C++实现(Gaussian Blur),改成了Java版本的和ndk版本的,对比了下效果,Java的效率比较低,用时几十秒,ndk才不到1秒,毕竟安 ...
- c语言高斯模糊源码,C++实现纯高斯模糊算法处理灰度图片
实现功能: C++语言实现纯高斯模糊处理灰度图像,不受图片格式限制 算法实现: /// /// 程序功能:c语言实现纯高斯模糊处理灰度图像 /// 系统win7,VS2010开发环境,编程语言C++, ...
最新文章
- lintcode:Singleton 单例
- redis事务原理,使用,详解
- 归并排序比较次数_归并排序「从入门到放弃」
- oracle归档日志的概念,浅谈Oracle归档日志
- 信号中断 与 慢系统调用
- python的合法名称_python 命名规范
- 【2022年】帝豪gs/帝豪gl 车机安装第三方软件教程
- CGI-plus_x86_x64_自适应版系统安装和备份工具参数案例笔记
- 故宫商业大跃进 逐渐失控的IP洪流
- 学习笔记(1):Linux操作系统入门培训_Linux/Unix基础培训教程视频课程-01.Linux入门培训之_软硬件平台介绍...
- C语言学习-翁凯(第三章笔记)
- 一个数根号3怎样用计算机计算,手机计算器怎样打出根号3
- 华为交换机的应用案例(小)
- 【Linux服务器管理】1、用户与权限
- 读书寄语:所有的遇见都是有原因的,并不只是偶然
- Android APP如何实现支付宝支付
- The Open Group中国首届线上大会 专场三亮点解读
- ALBRECHT铣刀夹头BT50 20-32
- Delphi2010设置成Delphi7风格
- SaaS-HRM企业管理
热门文章
- java date 判断是否是今天_java——推断日期是否在今天之前
- linux 修改文件名_Linux常用命令
- 王者荣耀6月23服务器维护,王者荣耀6.23维护到什么时候?6月23日长枪掠火版本异常介绍...
- 访问数据库_Lua 数据库访问
- vscode工作区是什么意思_空压机的容积流量和工作压力是什么意思?
- css中position的两种定位(absolute、relative)
- 小程序内嵌h5页面分享_微信小程序webview内页面分享
- 外卖和快递行业数据_下周一起,整治全面启动!锁定全市外卖、快递行业!
- c语言流水灯小程序,流水灯小程序.doc
- 从头开始vue创建项目_我正在以设计师的身份开始一个被动的收入项目。 从头开始。...