版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_30100043/article/details/83901910
这个功能目的是为了模糊一些人的脸部，一些文字信息。主要用于用户手动操作进行模糊。
实现的功能：本人实现了再pc端上面进行拖拽模糊。
实现思路：
- 首先加载图片，然后再加载完成的回调中，创建一个高斯模糊过的图片画布。
- 接着，绑定鼠标的交互事件，在里面获取到在画布上面点击的位置。通过位置获取当前位置周围的图像数据，进行生成圆形数据。
- 最后，使用drawImage将数据覆盖到画布上面。
是不是感觉思路很简单，其实实现起来也不那么难。
接下来，查看一下案例：地址还没有
最后付上源码
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>canvas画布的高斯模糊效果</title>
</head>
<body>
<canvas id="canvas" style="margin: 0 auto; display: block;"></canvas>
<canvas id="pixelCanvas"></canvas>
</body>
<script>
var canvas = document.getElementById('canvas');
let img = new Image();
//这里直接修改图片的路径
img.src = "meinv.jpg";
img.onload = function () {
let bufferCanvas = document.createElement("canvas");
let ctx = bufferCanvas.getContext('2d');
let canvasCtx = canvas.getContext("2d");
//设置canvas的宽高
canvas.height = bufferCanvas.height = img.height;
canvas.width = bufferCanvas.width = img.width;
//将图像绘制到canvas上面
ctx.drawImage(img, 0, 0, img.width, img.height);
canvasCtx.drawImage(img, 0, 0, img.width, img.height);
//从画布获取一半图像
var emptyData = ctx.getImageData(0, 0, img.width, img.height);
//将图像数据进行高斯模糊 data.data是一个数组，每四个值代表一个像素点的rgba的值，data.width data.height 分别代表图像数据的宽高
emptyData = gaussBlur(emptyData);
//将模糊的图像数据再渲染到画布上面
ctx.putImageData(emptyData, 0, 0);
//绑定点击事件，然后通过点击事件获取当前点击区域进行绘制
canvas.addEventListener("mousedown", function (e) {
//获取到canvas距离窗口左上角的位置
let offsetLeft = canvas.getBoundingClientRect().left;
let offsetTop = canvas.getBoundingClientRect().top;
//获取到鼠标距离窗口左上角的
let downX = e.clientX - offsetLeft;
let downY = e.clientY - offsetTop;
//console.log(downX, downY);
generatePixel(downX, downY);
function mouseMove(event) {
let moveX = event.clientX - offsetLeft;
let moveY = event.clientY - offsetTop;
//console.log(moveX, moveY);
generatePixel(moveX, moveY);
}
function mouseUp() {
document.removeEventListener("mousemove", mouseMove);
document.removeEventListener("mouseup", mouseUp);
}
document.addEventListener("mousemove", mouseMove);
document.addEventListener("mouseup", mouseUp)
});
//根据坐标位置，生成附近九像素的贴图
let num = 50;
let r = num / 2;
let pixelCanvas = document.createElement("canvas");
pixelCanvas.width = pixelCanvas.height = num;
let pixelCtx = pixelCanvas.getContext("2d");
function generatePixel(x, y) {
let imageData = ctx.getImageData(x - r, y - r, num, num);
pixelCtx.putImageData(imageData, 0, 0);
//x右侧超出
if (x + r > bufferCanvas.width) {
let imageData = ctx.getImageData(0, y - r, x + r - bufferCanvas.width, num);
pixelCtx.putImageData(imageData, bufferCanvas.width - x + num / 2, 0);
}
//x左侧超出
if (x - r < 0) {
let imageData = ctx.getImageData(bufferCanvas.width + x - r, y - r, -x + r, num);
pixelCtx.putImageData(imageData, 0, 0);
}
//将绘制的正方形裁剪成圆形
pixelCtx.fillStyle = pixelCtx.createPattern(pixelCanvas, 'no-repeat');
pixelCtx.clearRect(0, 0, num, num);
pixelCtx.arc(r, r, r, 0, Math.PI * 2);
pixelCtx.fill();
canvasCtx.drawImage(pixelCanvas, x - r, y - r, num, num);
//如果是在左右边缘，需要绘制两次
if(x + r > bufferCanvas.width){
canvasCtx.drawImage(pixelCanvas, x-r-bufferCanvas.width, y-r);
}
if(x-r < 0){
canvasCtx.drawImage(pixelCanvas, x-r+bufferCanvas.width, y-r);
}
}
};
//将数据进行高斯模糊
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>
</html>