使用canvas画布实现高斯模糊效果

最新推荐文章于 2024-05-25 09:36:05 发布
最新推荐文章于 2024-05-25 09:36:05 发布
阅读量7.7k 收藏 6
点赞数
分类专栏： html5 文章标签： canvas 画布模糊 高斯模糊 图片处理 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30100043/article/details/83784608
版权

最近项目中有一个需求是实现图片的局部模糊效果，看上去一个挺难的效果。在实现局部模糊效果前，首先能够实现全部模糊。经过和度娘的一番较劲后，找到了一个不错的案例：https://blog.csdn.net/sunshineanl/article/details/70240250。
然后在他的基础上，经过一番修改，和备注，实现了当前的案例：
在这里插入图片描述

<!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一下，运行好了

暮志未晚NAN
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
62-JS-canvas画布高斯模糊之图像操作
qq_47462646的博客
02-20 195
相当于图片路径，用于将canvas对象转换为base64位编码。把图像数据(从指定的ImageData对象)放回画布上。2.获取当前画布上各各像素点的数据的。用内置服务器打开，练习代码效果如下。将一张图片放到canvas画布上。
用Javascript实现让Canvas变模糊的效果
无心的专栏
07-17 1万+
做Canvas应用的开发，可能会碰到需要使画面模糊的需求。 容易想到三种方式： 1、半透明模糊 PNG 覆盖的方式，这种方式简单易行，但是不能灵活控制模糊程度。 2、CSS方式，比如用-webkit-filter:blur(10px); 的形式，也极其简单，可控制模糊程度，但是这种方式的效果很差很差，中心模糊度高，四周模糊度低，而且整个元素外围会有光晕效果，已经不是真正意义的模糊了。 3、
基于Canvas实现的高斯模糊
玄魂工作室
12-17 1642
本文原创作者：字节跳动iNahoo---------------------------自从扁平化流行起来之后，高斯模糊效果渐渐变成了视觉很喜欢用的一种表现形式，我们的视觉小姐姐也特别...
推荐开源项目：YUVCanvas - 高效的视频帧HTML5画布渲染库
最新发布
gitblog_00014的博客
05-25 289
推荐开源项目：YUVCanvas - 高效的视频帧HTML5画布渲染库 项目地址:https://gitcode.com/brion/yuv-canvas YUVCanvas 是一个强大的JavaScript库，用于将YUV格式的视频帧绘制到HTML5的canvas元素上。这个项目源于ogv.js媒体播放器，特别适合高频率帧更新和利用WebGL进行颜色空间转换的应用场景。 项目介绍 YUVCanv...
高斯模糊之canvas实现
u011539729的博客
12-06 597
依然是这位美女 接着来高斯模糊一下 模糊一下更具有朦胧美,还有小磨皮效果,痘痘马上无影踪,一键体验摘下近视镜的快感.好了,就扯这么多.下面来看看怎么实现高斯模糊. 高斯模糊的模糊感是参照每个像素点周边的像素来进行按权运算,而不是随便掺杂个五颜六色到像素里.正如刚说的,按权来取得周边的值,这里的按权是依据二维正态分布来分权的.得到权后我们就可以计算出当前像素的r,g,b值了. 这里要注意的是: ...
canvas 高斯模糊效果
qq_17627195的博客
08-04 726
canvas 高斯模糊效果。
canvas实现高斯模糊
Sunshineanl的博客
04-19 9286
对于模糊图片这个效果的实现，其实css3中的filter属性也能够实现，但是这个属性的兼容性不是很好，所以我们通常不用这种方法实现，而使用canvas配合JS实现。高斯模糊就是按照高斯曲线对图片进行模糊处理，所谓”模糊”，可以理解成每个像素都取周边像素的平均值，这样的话就会是图片像素值处于一种“平滑化”，产生模糊的效果。局部模糊效果图gauss.js代码function gaussBlur(imgD
js canvas画布实现高斯模糊效果
10-17
本文将详细介绍如何利用Canvas API实现高斯模糊效果，特别关注于JavaScript代码中的关键步骤和技术。 首先，我们需要创建一个HTML页面，包含一个`<canvas>`元素，用于绘制图像和应用模糊效果。在示例代码中，我们...
canvas实现模糊效果
01-30
在本主题中，我们将深入探讨如何使用CSS3和Canvas来实现图片的模糊效果，特别是在Canvas上进行交互设计时如何应用模糊特效。 首先，CSS3已经提供了`filter`属性来实现元素的模糊效果。通过`filter: blur(x)`，我们...
blur_desktop：纯HTML实现类似mac os动态高斯模糊效果
02-21
纯html实现类似mac os动态高斯模糊效果 先看下效果： 在线演示： : 整个页面分为： 顶部工具栏（实现了高斯模糊） 桌面区 开始菜单（实现了高斯模糊） 通知区（实现了高斯模糊） 底部码头（实现了高斯模糊） 桌面...
Android 高斯模糊
03-28
在Android开发中，高斯模糊（Gaussian Blur）是一种常用的技术，用于实现视觉效果，比如将清晰的图像处理成带有柔和边缘的模糊效果。这种效果常被应用在音乐播放器等应用中，如将专辑封面图片进行模糊处理，用作背景...
canvas-blur:通过canvas实现毛玻璃效果
07-07
canvas-blur 通过canvas实现毛玻璃效果 Fabio Sasso制作过一个事例使用了 html2canvas 0.4.1 (js截图库） Stackblur （图片模糊处理） 完成了一个半透明的导航栏 对比通过CSS的改进实现毛玻璃的效果 （image.css 是一个通过base64加密过得图片，可以实现毛玻璃的那种粗糙效果）
html5实现毛玻璃模糊效果 Aero风格
06-09
html5分别使用css3和canvas实现毛玻璃模糊效果 Aero风格
H5中基于Canvas实现的高斯模糊
weixin_33940102的博客
07-24 533
自从扁平化流行起来之后，高斯模糊效果渐渐变成了视觉很喜欢用的一种表现形式，我们的视觉小姐姐也特别喜欢。为了满足她，踩了无穷无尽的坑之后，最后只能掏出Canvas来了。 没有什么视觉需求是Canvas解决不了的，如果有，再盖一层Canvas —— 奈帆斯基 解决痛点 CSS模糊 和 大面积transform 混用时，会导致的性能问题 ( 卡 ) CSS...
前端-原生-Canvas-模糊滤镜
古猜@的博客
05-25 664
使用及其简单
HTML5 JS实现毛玻璃效果（高斯模糊）
热门推荐
魏亚恒的博客
02-27 5万+
苹果IOS系统的毛玻璃效果非常绚丽，自己也想在HTML5中实现同样的效果 css3中可以使用blur来实现这种效果： .blur { -webkit-filter: blur(10px); -moz-filter: blur(10px); -ms-filter: blur(10px); filter: blur(
Canvas图片模糊效果（学习笔记）
781193278专栏
02-15 2407
Canvas图片模糊效果学习视频：http://www.imooc.com/learn/601 Demo和学习笔记 index.html canvas玩儿转红包照片 <!-- 手机端适配 --> <meta name="viewport" content="height=device-height, width=device-width,
基于H5canvas和js的高斯模糊处理
翾的博客
04-06 1391
效果线上效果图 原理高斯模糊的原理中，它是根据高斯曲线调节像素色值，它是有选择地模糊图像。说得直白一点，就是高斯模糊能够把某一点周围的像素色值按高斯曲线统计起来，采用数学上加权平均的计算方法得到这条曲线的色值，最后能够留下人物的轮廓，即曲线. 更加具体的解释请移步到 阮一峰的高斯模糊算法. 本篇blog主要讨论js的高斯函数及其应用.采用了两种分别不同的函数来处里像素位点, 第一种是直接使
OpenCvsharp学习(十六):滤波2:高斯滤波
猥琐de专注
01-04 1085
高斯滤波 每个像素点的值都由本身与和邻近区域的其他像素值经过加权平均后得到,加权系数越靠近中心越大,越远离中心越小 函数原型: public static void GaussianBlur(InputArray src, OutputArray dst, Size ksize, double sigmaX, double sigmaY = 0, BorderTypes borderType = BorderTypes.Reflect101); src:输入图像 dst:输出图像 ksize:高斯核的大小
canvas画布实现手写签名效果的示例代码
04-29
以下是一个简单的使用canvas画布实现手写签名效果的示例代码： HTML代码： ```html <canvas id="signature-canvas" width="400" height="200"></canvas> <button id="clear-button">清除</button> ``` JavaScript代码： ```javascript const canvas = document.getElementById('signature-canvas'); const context = canvas.getContext('2d'); let isDrawing = false; let lastX = 0; let lastY = 0; // 监听鼠标按下事件 canvas.addEventListener('mousedown', (event) => { isDrawing = true; [lastX, lastY] = [event.offsetX, event.offsetY]; }); // 监听鼠标移动事件 canvas.addEventListener('mousemove', (event) => { if (isDrawing) { context.beginPath(); context.moveTo(lastX, lastY); context.lineTo(event.offsetX, event.offsetY); context.stroke(); [lastX, lastY] = [event.offsetX, event.offsetY]; } }); // 监听鼠标松开事件 canvas.addEventListener('mouseup', () => { isDrawing = false; }); // 监听鼠标离开事件 canvas.addEventListener('mouseleave', () => { isDrawing = false; }); // 监听清除按钮点击事件 const clearButton = document.getElementById('clear-button'); clearButton.addEventListener('click', () => { context.clearRect(0, 0, canvas.width, canvas.height); }); ``` 这个示例代码中，我们使用了canvas的2D绘图上下文对象（context），监听了鼠标的按下、移动、松开和离开事件，通过绘制连续的线条来实现手写签名效果。此外，我们还添加了一个清除按钮，用于清除画布上的内容。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值