<script>

    var canvas = document.getElementById('canvas');

    var ctx = canvas.getContext('2d');

    let img = new Image();

    //这里直接修改图片的路径

    img.src = "636753681750720000/Block/preview.jpg";

    img.onload = function () {

        //设置canvas的宽高

        canvas.height = img.height;

        canvas.width = img.width;

        //将图像绘制到canvas上面

        ctx.drawImage(img, 0, 0, img.width, img.height);

        //从画布获取一半图像

        var data = ctx.getImageData(0, 0, img.width/2, img.height);

        //将图像数据进行高斯模糊 data.data是一个数组，每四个值代表一个像素点的rgba的值，data.width data.height 分别代表图像数据的宽高

        var emptyData = gaussBlur(data);

        //将模糊的图像数据再渲染到画布上面

        ctx.putImageData(emptyData, 0, 0);

    };

    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;

    }

</script>