首页 > 建站教程 > JS、jQ、TS >  canvas实现高斯模糊正文

canvas实现高斯模糊

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

高斯模糊
    就是按照高斯曲线对图片进行模糊处理，所谓”模糊”，可以理解成每个像素都取周边像素的平均值，这样的话就会是图片像素值处于一种“平滑化”，产生模糊的效果。

局部模糊效果图



gauss.js代码
查看代码
打印?
01function gaussBlur(imgData) {
02    var pixes = imgData.data;
03    var width = imgData.width;
04    var height = imgData.height;
05    var gaussMatrix = [],
06        gaussSum = 0,
07        x, y,
08        r, g, b, a,
09        i, j, k, len;
10 
11    var radius = 10;
12    var sigma = 5;
13 
14    a = 1 / (Math.sqrt(2 * Math.PI) * sigma);
15    b = -1 / (2 * sigma * sigma);
16    //生成高斯矩阵
17    for (i = 0, x = -radius; x <= radius; x++, i++){
18        g = a * Math.exp(b * x * x);
19        gaussMatrix[i] = g;
20        gaussSum += g;
21 
22    }
23    //归一化, 保证高斯矩阵的值在[0,1]之间
24    for (i = 0, len = gaussMatrix.length; i < len; i++) {
25        gaussMatrix[i] /= gaussSum;
26    }
27    //x 方向一维高斯运算
28    for (y = 0; y < height; y++) {
29        for (x = 0; x < width; x++) {
30            r = g = b = a = 0;
31            gaussSum = 0;
32            for(j = -radius; j <= radius; j++){
33                k = x + j;
34                if(k >= 0 && k < width){//确保 k 没超出 x 的范围
35                    //r,g,b,a 四个一组
36                    i = (y * width + k) * 4;
37                    r += pixes[i] * gaussMatrix[j + radius];
38                    g += pixes[i + 1] * gaussMatrix[j + radius];
39                    b += pixes[i + 2] * gaussMatrix[j + radius];
40                    // a += pixes[i + 3] * gaussMatrix[j];
41                    gaussSum += gaussMatrix[j + radius];
42                }
43            }
44            i = (y * width + x) * 4;
45            // 除以 gaussSum 是为了消除处于边缘的像素, 高斯运算不足的问题
46            // console.log(gaussSum)
47            pixes[i] = r / gaussSum;
48            pixes[i + 1] = g / gaussSum;
49            pixes[i + 2] = b / gaussSum;
50            // pixes[i + 3] = a ;
51        }
52    }
53    //y 方向一维高斯运算
54    for (x = 0; x < width; x++) {
55        for (y = 0; y < height; y++) {
56            r = g = b = a = 0;
57            gaussSum = 0;
58            for(j = -radius; j <= radius; j++){
59                k = y + j;
60                if(k >= 0 && k < height){//确保 k 没超出 y 的范围
61                    i = (k * width + x) * 4;
62                    r += pixes[i] * gaussMatrix[j + radius];
63                    g += pixes[i + 1] * gaussMatrix[j + radius];
64                    b += pixes[i + 2] * gaussMatrix[j + radius];
65                    // a += pixes[i + 3] * gaussMatrix[j];
66                    gaussSum += gaussMatrix[j + radius];
67                }
68            }
69            i = (y * width + x) * 4;
70            pixes[i] = r / gaussSum;
71            pixes[i + 1] = g / gaussSum;
72            pixes[i + 2] = b / gaussSum;
73        }
74    }
75    return imgData;
76}
index.html代码
查看代码
打印?
01<!DOCTYPE html>
02<html lang="en">
03<head>
04    <meta charset="UTF-8">
05    <title>Document</title>
06    <style>
07        canvas {
08            border: 1px solid black;
09        }
10        img {
11            display: none;
12        }
13    </style>
14</head>
15<body>
16    <img src="1.jpg" id="img">
17    <canvas width="450" height="300" id="canvas"></canvas>
18    <script src="gauss.js"></script>
19    <script>
20        var img = document.getElementById('img');
21        var canvas = document.getElementById('canvas');
22        var ctx = canvas.getContext('2d');
23        img.onload = function () {
24            ctx.drawImage(img, 0, 0, 450, 300);
25            var data = ctx.getImageData(225, 0, 450, 300);
26            var emptyData = ctx.createImageData(225, 300);
27            emptyData = gaussBlur(data);
28            ctx.putImageData(emptyData, 225, 0);
29        }
30    </script>
31</body>
32</html>

TAGS: canvas高斯模糊