对于模糊图片这个效果的实现,其实css3中的filter属性也能够实现,但是这个属性的兼容性不是很好,所以我们通常不用这种方法实现,而使用canvas配合JS实现。
高斯模糊
就是按照高斯曲线对图片进行模糊处理,所谓”模糊”,可以理解成每个像素都取周边像素的平均值,这样的话就会是图片像素值处于一种“平滑化”,产生模糊的效果。
局部模糊效果图
gauss.js代码
01 | function gaussBlur(imgData) { |
02 | var pixes = imgData.data; |
03 | var width = imgData.width; |
04 | var height = imgData.height; |
14 | a = 1 / (Math.sqrt(2 * Math.PI) * sigma); |
15 | b = -1 / (2 * sigma * sigma); |
17 | for (i = 0, x = -radius; x <= radius; x++, i++){ |
18 | g = a * Math.exp(b * x * x); |
24 | for (i = 0, len = gaussMatrix.length; i < len; i++) { |
25 | gaussMatrix[i] /= gaussSum; |
28 | for (y = 0; y < height; y++) { |
29 | for (x = 0; x < width; x++) { |
32 | for (j = -radius; j <= radius; j++){ |
34 | if (k >= 0 && k < width){ |
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]; |
41 | gaussSum += gaussMatrix[j + radius]; |
44 | i = (y * width + x) * 4; |
47 | pixes[i] = r / gaussSum; |
48 | pixes[i + 1] = g / gaussSum; |
49 | pixes[i + 2] = b / gaussSum; |
54 | for (x = 0; x < width; x++) { |
55 | for (y = 0; y < height; y++) { |
58 | for (j = -radius; j <= radius; j++){ |
60 | if (k >= 0 && k < height){ |
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]; |
66 | gaussSum += gaussMatrix[j + radius]; |
69 | i = (y * width + x) * 4; |
70 | pixes[i] = r / gaussSum; |
71 | pixes[i + 1] = g / gaussSum; |
72 | pixes[i + 2] = b / gaussSum; |
index.html代码
04 | < meta charset = "UTF-8" > |
05 | < title >Document</ title > |
08 | border: 1px solid black; |
16 | < img src = "1.jpg" id = "img" > |
17 | < canvas width = "450" height = "300" id = "canvas" ></ canvas > |
18 | < script src = "gauss.js" ></ 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); |