js canvas画布实现高斯模糊效果
程序员文章站
2023-11-05 15:42:52
最近项目中有一个需求是实现图片的局部模糊效果,看上去一个挺难的效果。在实现局部模糊效果前,首先能够实现全部模糊。经过和度娘的一番较劲后,找到了一个不错的案例,然后在他的基础...
最近项目中有一个需求是实现图片的局部模糊效果,看上去一个挺难的效果。在实现局部模糊效果前,首先能够实现全部模糊。经过和度娘的一番较劲后,找到了一个不错的案例,然后在他的基础上,经过一番修改,和备注,实现了当前的案例:
<!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"></canvas> </body> <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> </html>
代码不多,大家直接copy一下,运行好了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。