canvas实现高斯模糊
- 作者：网页模板
- 类型：图文教程
- 点击次数：
- 发布时间：2019-05-18 16:46
对于模糊图片这个效果的实现，其实css3中的filter属性也能够实现，但是这个属性的兼容性不是很好，所以我们通常不用这种方法实现，而使用canvas配合JS实现。
高斯模糊
就是按照高斯曲线对图片进行模糊处理，所谓”模糊”，可以理解成每个像素都取周边像素的平均值，这样的话就会是图片像素值处于一种“平滑化”，产生模糊的效果。
局部模糊效果图
gauss.js代码
(责任编辑：网页模板)
高斯模糊
就是按照高斯曲线对图片进行模糊处理，所谓”模糊”，可以理解成每个像素都取周边像素的平均值，这样的话就会是图片像素值处于一种“平滑化”，产生模糊的效果。
局部模糊效果图
gauss.js代码
function gaussBlur(imgData) {
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;
var radius = 10;
var sigma = 5;
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;
}
}
return imgData;
}
index.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
canvas {
border: 1px solid black;
}
img {
display: none;
}
</style>
</head>
<body>
<img src="1.jpg" id="img">
<canvas width="450" height="300" id="canvas"></canvas>
<script src="gauss.js"></script>
<script>
var img = document.getElementById('img');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
img.onload = function () {
ctx.drawImage(img, 0, 0, 450, 300);
var data = ctx.getImageData(225, 0, 450, 300);
var emptyData = ctx.createImageData(225, 300);
emptyData = gaussBlur(data);
ctx.putImageData(emptyData, 225, 0);
}
</script>
</body>
</html>
(责任编辑：网页模板)
- 本文标签：
- canvas高斯模糊
