1.基本准备（图片），放到img文件夹下面（我比较喜欢叫img）,自己随意。
2.html基本页面。基本css。需要指定元素的id或者类名，以便后续获取dom元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body,html{
width: 100%;
height: 100%;
background: rgba(0,0,0,0.6);
}
#box{
width: 1200px;
height: 600px;
border: 1px solid #26F2E0;
position: absolute;
top: 50%;
margin-top: -300px;
left:50%;
margin-left: -600px;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
3.基本页面效果
4.烧脑环节，高数不好，就不多解释了。高斯模糊算法，将其封装成一个自执行函数，挂载到window对象上面，直接调用就可以。
(function (root) {
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;
}
}
//end
return imgData;
}
function blurImg(img, ele) {
var canvas = document.createElement('canvas');
//这个尺寸可以调整模糊的程度
canvas.width = 700;
canvas.height = 700;
var context = canvas.getContext('2d');
context.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
var imgData = context.getImageData(0, 0, canvas.width, canvas.height);
var gaussData = gaussBlur(imgData);
context.putImageData(gaussData, 0, 0);
var imgSrc = canvas.toDataURL();
ele.style.backgroundImage = 'url(' + imgSrc + ')';
ele.style.backgroundSize = "100% 100%";
}
root.blurImg = blurImg;
})(window.player || (window.player = {}));
5.在script标签里面实例化Image对象，指定src,image实例onload时，调用挂载到window上面的方法（上面第四步）。
var img = new Image();
img.src = "./img/2051141.jpg";
img.onload = function(){
window.player.blurImg(img, document.getElementById('box'));
}
6.效果展示。
7.调整blurImg方法里面canvans的宽高，可以调节模糊程度。
8.是否觉得直接指定背景图片，调节opacity就可以了，哪有这么麻烦。亲测不行，底层原理不一样。上代码，上效果。
#box{
width: 1200px;
height: 600px;
position: absolute;
top: 50%;
margin-top: -300px;
left:50%;
margin-left: -600px;
background: url(img/2051141.jpg);
background-size: 100% 100%;
opacity: 0.4;
}
9.上面canvans操作的是像素点，设置opacity像素没改变。