canvas实现高斯模糊

对于模糊图片这个效果的实现，其实css3中的filter属性也能够实现，但是这个属性的兼容性不是很好，所以我们通常不用这种方法实现，而使用canvas配合JS实现。

高斯模糊

就是按照高斯曲线对图片进行模糊处理，所谓”模糊”，可以理解成每个像素都取周边像素的平均值，这样的话就会是图片像素值处于一种“平滑化”，产生模糊的效果。

局部模糊效果图

gauss.js代码

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;
}

index.html代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>canvas {border: 1px solid black;}img {display: none;}</style>
</head>
<body><img src="1.jpg" id="img"><canvas width="450" height="300" id="canvas"></canvas><script src="gauss.js"></script><script>var img = document.getElementById('img');var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');img.onload = function () {ctx.drawImage(img, 0, 0, 450, 300);var data = ctx.getImageData(225, 0, 450, 300);var emptyData = ctx.createImageData(225, 300);emptyData = gaussBlur(data);ctx.putImageData(emptyData, 225, 0);}</script>
</body>
</html>

canvas实现高斯模糊相关推荐

图片模糊化编程(毛玻璃效果)
去年盛夏之时,曾写过"小tip: 使用CSS将图片转换成黑白"一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间 ...
canvas高斯模糊算法
对于模糊图片这个效果的实现,其实css3中的filter属性也能够实现,但是这个属性的兼容性不是很好,所以我们通常不用这种方法实现,而使用canvas配合JS实现. <span style=&q ...
canvas换图时候会闪烁_基于Canvas实现的高斯模糊（上）「JS篇」
作者:iNahoo 转发链接:https://mp.weixin.qq.com/s/5TxPjznpEBku_ybSMBdnfw 目录基于Canvas实现的高斯模糊(上)「JS篇」本篇基于Canv ...
高斯模糊之canvas实现
依然是这位美女接着来高斯模糊一下模糊一下更具有朦胧美,还有小磨皮效果,痘痘马上无影踪,一键体验摘下近视镜的快感.好了,就扯这么多.下面来看看怎么实现高斯模糊. 高斯模糊的模糊感是参照每个像素点周边 ...
js实现图片虚化_js canvas画布实现高斯模糊效果
最近项目中有一个需求是实现图片的局部模糊效果,看上去一个挺难的效果.在实现局部模糊效果前,首先能够实现全部模糊.经过和度娘的一番较劲后,找到了一个不错的案例,然后在他的基础上,经过一番修改,和备注,实 ...
html中放大镜案列,Canvas实现放大镜效果完整案例分析(附代码)
本文主要记录 canvas 在图像.文字处理.离屏技术和放大镜特效的实现过程中使用到的api.先看下效果吧: 一张模糊的图片: 鼠标点击任意位置,产生放大效果: 哇塞~ 一个帅哥,哈哈哈哈~ 1.放大 ...
g标签怎么设置svg_SVG（可缩放矢量图形）图片添加、高斯模糊、渐变与g标签
今天主要谈一下SVG的特殊效果其实和canvas都是差不多的,只不过是利用XML标签用的不是很多但是以防以后万一用到还是整理一下图片添加 svg中也可以添加图片注意这里是image标签而不是我 ...
html5中在图片上打字的语法,HTML5 canvas 基本语法
HTML 5 canvas -- 基本语法简述 5 规范引进了很多新特性,其中最令人期待的之一就是元素.HTML 5 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强大.每 ...
android动画超出圆角,Android关于Glide的使用(高斯模糊、加载监听、圆角图片)
高斯模糊.加载监听.圆角图片这些相信大家都很熟悉,那如何实现这些效果,请大家参考本文进行学习. 1.引用 compile 'com.github.bumptech.glide:glide:3.7.0' ...

canvas实现高斯模糊

高斯模糊

局部模糊效果图

gauss.js代码

index.html代码

canvas实现高斯模糊相关推荐

最新文章

热门文章