canvas实现高斯模糊

来源：互联网发布：服务贸易进出口数据库编辑：程序博客网时间：2024/05/29 07:46

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

1 1