基于H5canvas和js的高斯模糊处理

效果

先上效果图

原理

高斯模糊的原理中，它是根据高斯曲线调节像素色值，它是有选择地模糊图像。说得直白一点，就是高斯模糊能够把某一点周围的像素色值按高斯曲线统计起来，采用数学上加权平均的计算方法得到这条曲线的色值，最后能够留下人物的轮廓，即曲线. 更加具体的解释请移步到阮一峰的高斯模糊算法.
本篇blog主要讨论js的高斯函数及其应用.

采用了两种分别不同的函数来处里像素位点, 第一种是直接使用二种循环, 时间复杂度为O(xy(2r)^2). 另一种是采用一维公式分别对x, y进行循环处理, 时间复杂度为O(2xy(2r)).

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>Document</title>
</head>
<body><img src="林徽因.jpg" id="imgSource"><canvas id="canvas"></canvas><script>
window.onload = function(){var img = document.getElementById("imgSource"),canvas = document.getElementById('canvas'),width = img.width,height = img.height;canvas.width = width;canvas.height = height;var context = canvas.getContext("2d");context.drawImage(img, 0, 0);var canvasData = context.getImageData(0, 0, canvas.width, canvas.height);var tempData = gaussBlur1(canvasData, 20);context.putImageData(tempData,0,0);
}/*** 此函数为二重循环*/
function gaussBlur(imgData, radius, sigma) {var pixes = imgData.data,width = imgData.width,height = imgData.height;radius = radius || 5;sigma = sigma || radius / 3;var gaussEdge = radius * 2 + 1;    // 高斯矩阵的边长var gaussMatrix = [],gaussSum = 0,a = 1 / (2 * sigma * sigma * Math.PI),b = -a * Math.PI;for (var i=-radius; i<=radius; i++) {for (var j=-radius; j<=radius; j++) {var gxy = a * Math.exp((i * i + j * j) * b);gaussMatrix.push(gxy);gaussSum += gxy;    // 得到高斯矩阵的和，用来归一化}}var gaussNum = (radius + 1) * (radius + 1);for (var i=0; i<gaussNum; i++) {gaussMatrix[i] = gaussMatrix[i] / gaussSum;    // 除gaussSum是归一化}//console.log(gaussMatrix);// 循环计算整个图像每个像素高斯处理之后的值for (var x=0; x<width;x++) {for (var y=0; y<height; y++) {var r = 0,g = 0,b = 0;//console.log(1);// 计算每个点的高斯处理之后的值for (var i=-radius; i<=radius; i++) {// 处理边缘var m = handleEdge(i, x, width);for (var j=-radius; j<=radius; j++) {// 处理边缘var mm = handleEdge(j, y, height);var currentPixId = (mm * width + m) * 4;var jj = j + radius;var ii = i + radius;r += pixes[currentPixId] * gaussMatrix[jj * gaussEdge + ii];g += pixes[currentPixId + 1] * gaussMatrix[jj * gaussEdge + ii];b += pixes[currentPixId + 2] * gaussMatrix[jj * gaussEdge + ii];}}var pixId = (y * width + x) * 4;pixes[pixId] = ~~r;pixes[pixId + 1] = ~~g;pixes[pixId + 2] = ~~b;}}imgData.data = pixes;return imgData;
}function handleEdge(i, x, w) {var  m = x + i;if (m < 0) {m = -m;} else if (m >= w) {m = w + i - x;}return m;
}/*** 此函数为分别循环*/
function gaussBlur1(imgData,radius, sigma) {var pixes = imgData.data;var width = imgData.width;var height = imgData.height;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;if(k >= 0 && k < width){//确保 k 没超出 x 的范围//r,g,b,a 四个一组i = (y * width + k) * 4;r += pixes[i] * gaussMatrix[j + radius];g += pixes[i + 1] * gaussMatrix[j + radius];b += pixes[i + 2] * gaussMatrix[j + radius];// a += pixes[i + 3] * gaussMatrix[j];gaussSum += gaussMatrix[j + radius];}}i = (y * width + x) * 4;// 除以 gaussSum 是为了消除处于边缘的像素, 高斯运算不足的问题// console.log(gaussSum)pixes[i] = r / gaussSum;pixes[i + 1] = g / gaussSum;pixes[i + 2] = b / gaussSum;// pixes[i + 3] = a ;}}//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 += pixes[i] * gaussMatrix[j + radius];g += pixes[i + 1] * gaussMatrix[j + radius];b += pixes[i + 2] * gaussMatrix[j + radius];// a += pixes[i + 3] * gaussMatrix[j];gaussSum += gaussMatrix[j + radius];}}i = (y * width + x) * 4;pixes[i] = r / gaussSum;pixes[i + 1] = g / gaussSum;pixes[i + 2] = b / gaussSum;// pixes[i] = r ;// pixes[i + 1] = g ;// pixes[i + 2] = b ;// pixes[i + 3] = a ;}}//endimgData.data = pixes;return imgData;
}</script>
</body>
</html>

基于H5canvas和js的高斯模糊处理相关推荐

h5 高斯模糊_基于H5canvas和js的高斯模糊处理
效果先上效果图这里写图片描述原理高斯模糊的原理中,它是根据高斯曲线调节像素色值,它是有选择地模糊图像.说得直白一点,就是高斯模糊能够把某一点周围的像素色值按高斯曲线统计起来,采用数学上加权平均 ...
java 返回js_如何基于java或js获取URL返回状态码
这篇文章主要介绍了如何基于java或js获取URL返回状态码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参fgLAeaGAH考下描述:使用java或者 ...
基于css和js的轮播效果图实现
基于css和js的轮播效果图实现第一篇:效果图 1.先啥也不说直接上效果图第二篇:详细讲解 1. 建立容器 #box 给其设置相关属性(注意:overflow:hidden;) 2. Box ...
（转）基于Arcgis for Js的web GIS数据在线采集简介
http://blog.csdn.net/gisshixisheng/article/details/44310765 在前一篇博文"Arcgis for js之WKT和geometry转换 ...
基于HTML+CSS+JS+JQuery的京东商城
基于HTML+CSS+JS+JQuery的京东商城包含京东商城首页,商品详情页,购物车页,订单确认页,结算页面,登录页,注册页. 项目截图注册页面,有正则表达式验证,验证码则为6位随机数,注册成功 ...
h5打印时如何控制打印区域（基于jquery.PrintArea.js实现）
h5打印时如何控制打印区域(基于jquery.PrintArea.js实现) javaSript 的 window.print() 打印时打印范围不可控制,而jquery.PrintArea.js可以 ...
基于 C# 和 js 开发的程序员升职记 remake 版
基于 C# 和 js 开发的程序员升职记 remake 版截图视频开发中用到的知识项目地址相关项目 Demo 截图视频基于C#和js的程序员升职记remake版开发中用到的知识 vue ...
实验一基于CSS+HTML+JS开发简单个人网站
目录: 实验要求实验代码 1.注册 2.登录 3.主页 4.个人简介 5.我的理想 6.我的生活 7.学习内容总结实验要求实验一基于CSS+HTML+JS开发简单个人网站实验学时:4 ...
【毕业设计】基于Springboot+vue.js的校园二手商城系统
此为原创合作开发项目 [毕业设计]基于springboot+vue.js的校园二手商城系统一.综述二手市场在中国是一个不够完善和成熟的市场,尤其在大学校园内.随着经济的发展,大学生生活水平的不断提 ...

基于H5canvas和js的高斯模糊处理

效果

原理

代码

基于H5canvas和js的高斯模糊处理相关推荐

最新文章

热门文章