本文原创作者:字节跳动 iNahoo
---------------------------
自从扁平化流行起来之后,高斯模糊效果渐渐变成了视觉很喜欢用的一种表现形式,我们的视觉小姐姐也特别喜欢。为了满足她,踩了无穷无尽的坑之后,最后只能掏出Canvas来了。
没有什么视觉需求是Canvas解决不了的,如果有,再盖一层Canvas
解决痛点
CSS模糊 和 大面积 transform 混用时,会导致的性能问题 ( 卡 )
CSS(svg)模糊 在图片边界的表现不够优秀,比如白边
iOS下高像素的高斯模糊会出现 奇怪的现象 ( 某些古董手机,突然颜色大变 )
一套解决方案,不再需要 svg+多种css兼容 判环境应用
理论原理
理论
模糊的效果相信大家都不陌生,实际上就是一种加权平均算法。
而 高斯模糊( Gaussian Blur ) 就是以高斯分布作为权重的平均算法。高斯分布长下面这个样子。
图片有x,y两个维度,所以在平均的时候应该使用二维高斯分布
基本算法
输入
图片Img
,模糊半径radius
按
radius
计算出高斯矩阵 gaussMatrix
避免重复计算遍历每一个像素
提取当前像素[x,y]{r,g,b,a}
求范围 [ x ± radius , y ± radius ] 内的 {r,g,b,a} 各自在
gaussMatrix
内的加权均值
输出
边界处理
观察系统的高斯模糊效果,边界总是半透明的。为了强调这一效果,我们在原图的背后增加一块等大小的红色背景。
可以很清楚的看到边界的虚边,我推测浏览器在实现时,在边界处增加了 alpha=0 的点来补齐计算。
对此,我的解决方案是:仅计算存在的点的权重算法实现
const gaussBlur = function (imgData, radius) { radius *= 3; //不知为什么,我的模糊半径是 css中 filter:bulr 值的三倍时效果才一致。莫非是当时的测试机是@3x? //Copy图片内容 const pixes = new Uint8ClampedArray(imgData.data); const width = imgData.width; const height = imgData.height; let gaussSum = 0, x, y, r, g, b, a, i; //模糊半径取整 radius = Math.floor(radius); //sigma越小中心点权重越高, sigma越大越接近平均模糊 const sigma = radius / 3; //两个分布无相关性, 为了各方向上权重分布一致 const Ror = 0; const L = radius * 2 + 1; //矩阵宽度 const Ror2 = Ror * Ror; const s2 = sigma * sigma; const c1 = 1 / ( 2 * Math.PI * s2 * Math.sqrt(1 - Ror * Ror)); const c2 = -1 / (2 * (1 - Ror2)); //定义高斯矩阵 , 存储在一维数组中 const gaussMatrix = []; //根据 xy 计算 index gaussMatrix.getIndex = (x, y)=> { return (x + radius) + (y + radius) * L; } //根据 xy 获取权重 gaussMatrix.getWeight = (x, y)=> { return gaussMatrix[gaussMatrix.getIndex(x, y)]; } //根据 index 获取 x 偏移 gaussMatrix.getX = (index)=> { return index % L - radius; } //根据 index 获取 y 偏移 gaussMatrix.getY = (index)=> { return Math.floor(index / L) - radius; } //覆写forEach , 方便遍历 gaussMatrix.forEach = (f)=> { gaussMatrix.map((w, i)=> { f(w, gaussMatrix.getX(i), gaussMatrix.getY(i)) }) } //生成高斯矩阵 for (y = -radius; y <= radius; y++) { for (x = -radius; x <= radius; x++) { let i = gaussMatrix.getIndex(x, y); g = c1 * Math.exp(c2 * (x * x + 2 * Ror * x * y + y * y) / s2); gaussMatrix[i] = g; } } //快捷获取像素点数据 const getPixel = (x, y)=> { if (x < 0 || x >= width || y < 0 || y >= height) { return null; } let p = (x + y * width) * 4; return pixes.subarray(p, p + 4); } //遍历图像上的每个点 i = 0; for (y = 0; y < height; y++) { for (x = 0; x < width; x++) { //重置 r g b a Sum r = g = b = a = 0; gaussSum = 0; //遍历模糊半径内的其他点 gaussMatrix.forEach((w, dx, dy)=> { let p = getPixel(x + dx, y + dy); if (!p)return; //求加权和 r += p[0] * w; g += p[1] * w; b += p[2] * w; a += p[3] * w; gaussSum += w; }); //写回imgData imgData.data.set([r, g, b, a].map(v=>v / gaussSum), i); //遍历下一个点 i += 4; } } return imgData; };
写完了实现的我,迫不及待的试了试
[ 效果拔群! 无与伦比! 掌声呢?!!! ]
一般来说写到这里,就算功成名就了,不过我瞥了一眼控制台…
足足算了21秒,这可是我心爱的 MacPro,我要报警了!
优化算法
目前的算法,复杂度大约是 wh * (2r)^2
之后我去搜了搜 大神代码,发现他们是先进行一轮X轴方向模糊,再进行一轮Y轴方向模糊,复杂度只有 2wh * 2r , 一下少了好多运算量。
我们也来试试。
[ 效果立竿见影 ]
以我的数学水平,并不能证明两者是等效的,但是从视觉上来看是一致的,为什么可以这样优化,期望大神赐教。
使用优化
即使已经这样进行了优化,依然会有 500ms 的计算时长,对于移动端来说通常是不可接受的。
从算法上可以看出来,运算量由三个方面来决定:图片宽w、高h,模糊半径r。
这样就能对我们的几个常见使用场景进行优化1. 大尺寸图片
例如一张900x600的图片,需要输出一张300x200@2x
可以将图片先缩放到300x200再计算模糊
2. 大半径模糊
例如一张900x600的图片,需要模糊半径150,需要输出一张300x200@2x的图
这样的图可以说是细节全失,通常视觉只Care成图的大概色彩范围,我们可以用一些粗暴的方法。
等比例计算,把图片变成 6x4 r=1 ,
计算模糊,输出 6x4 的图片
使用css拉伸到 300x200
实现
说白了优化手段就是一招缩小射线,我们抽象一个参数:
缩小倍率 shrink
对于一张图片的模糊过程可能会有超过一帧的计算量,所以我们把它变成异步的,方便未来迁移到 WebAssembly 或者 Worker 中。/** * @public * 暴露的异步模糊方法 * --------------------- * @param URL 图片地址,需要跨域支持 * @param r 模糊半径 {Int} * @param shrink 缩小比率 {Number} * @return {Promise} */ export const blur = (URL, r, shrink = 1)=> { return new Promise((resolve, reject)=> { const IMG = new Image(); IMG.crossOrigin = '*'; //需要图片跨域支持 IMG.onload = function () { const Canvas = document.createElement('CANVAS'); //大量使用可考虑只创建一次 let w = IMG.width, h = IMG.height; //缩小比例不为1时 , 重新计算宽高比 if (shrink !== 1) { w = Math.ceil(w / shrink); h = Math.ceil(h / shrink); r = Math.ceil(r / shrink); } //因为懒, 就全Try了, 实际上只 Try跨域错误 即可 try { //设置Canvas宽高,获取上下文 Canvas.width = w; Canvas.height = h; let ctx = Canvas.getContext('2d'); ctx.drawImage(IMG, 0, 0, w, h); //提取图片信息 let d = ctx.getImageData(0, 0, w, h); //进行高斯模糊 let gd = gaussBlur(d, r, 0); //绘制模糊图像 ctx.putImageData(gd, 0, 0); resolve(Canvas.toDataURL()); } catch (e) { reject(e); } }; IMG.src = URL; }) };
以一张 640x426 的图片,输出{ 300x200,r=10 }为例:
对比原尺寸模糊
缩小到1/10进行模糊
首先要明确的是,在缩小情况下两种算法并不等价。小图放大的模糊效果取决于浏览器本身的算法实现。最终视觉上效果差别不显著,完全可以使用。
面对形形色色的尺寸
考虑到来自服务端的图片可能有各种神奇的尺寸,而通常输出是一个确定的尺寸。
在这样的情况下,缩小比例会产生一些冗余,所以更适合另一个【锁定输出宽高的实现】。
/** * @public * 暴露的异步模糊方法 * --------------------- * @param URL 图片地址,需要跨域支持 * @param r 模糊半径 {Int} * @param w 输出宽度 {Number} * @param h 输出高度 {Number} * @return {Promise} */ export const blurWH = (URL, r, w ,h)=> { return new Promise((resolve, reject)=> { const IMG = new Image(); IMG.crossOrigin = '*'; //需要图片跨域支持 IMG.onload = function () { const Canvas = document.createElement('CANVAS'); //大量使用可考虑只创建一次 //锁定输出宽高之后, 就不需要Care 原图有多宽多高了 //let w = IMG.width, h = IMG.height; //因为懒, 就全Try了, 实际上只 Try跨域错误 即可 try { //设置Canvas宽高,获取上下文 Canvas.width = w; Canvas.height = h; let ctx = Canvas.getContext('2d'); ctx.drawImage(IMG, 0, 0, w, h); //提取图片信息 let d = ctx.getImageData(0, 0, w, h); //进行高斯模糊 let gd = gaussBlur(d, r, 0); //绘制模糊图像 ctx.putImageData(gd, 0, 0); resolve(Canvas.toDataURL()); } catch (e) { reject(e); } }; IMG.src = URL; }) };
总结
V8对连续执行的代码有静态优化,所以文中所列时间大家不要较真,看个数量级就好 ╮(╯▽╰)╭
兼容性
Uint8ClampedArray Can I use?
Android 4+
iOS safari 7.1+
Cross-Origin in Can I use?
Android 4.4 +
iOS safari 7.1+
完整实现
/** * @fileOverview * 高斯模糊 * @author iNahoo * @since 2017/5/8. */ "use strict"; const gaussBlur = function (imgData, radius) { radius *= 3; //不知为什么,我的模糊半径是 css中 filter:bulr 值的三倍时效果才一致。 //Copy图片内容 let pixes = new Uint8ClampedArray(imgData.data); const width = imgData.width; const height = imgData.height; let gaussMatrix = [], gaussSum, x, y, r, g, b, a, i, j, k, w; radius = Math.floor(radius); const sigma = radius / 3; a = 1 / (Math.sqrt(2 * Math.PI) * sigma); b = -1 / (2 * sigma * sigma); //生成高斯矩阵 for (i = -radius; i <= radius; i++) { gaussMatrix.push(a * Math.exp(b * i * i)); } //x 方向一维高斯运算 for (y = 0; y < height; y++) { for (x = 0; x < width; x++) { r = g = b = a = gaussSum = 0; for (j = -radius; j <= radius; j++) { k = x + j; if (k >= 0 && k < width) { i = (y * width + k) * 4; w = gaussMatrix[j + radius]; r += pixes[i] * w; g += pixes[i + 1] * w; b += pixes[i + 2] * w; a += pixes[i + 3] * w; gaussSum += w; } } i = (y * width + x) * 4; //计算加权均值 imgData.data.set([r, g, b, a].map(v=>v / gaussSum), i); } } pixes.set(imgData.data); //y 方向一维高斯运算 for (x = 0; x < width; x++) { for (y = 0; y < height; y++) { r = g = b = a = gaussSum = 0; for (j = -radius; j <= radius; j++) { k = y + j; if (k >= 0 && k < height) { i = (k * width + x) * 4; w = gaussMatrix[j + radius]; r += pixes[i] * w; g += pixes[i + 1] * w; b += pixes[i + 2] * w; a += pixes[i + 3] * w; gaussSum += w; } } i = (y * width + x) * 4; imgData.data.set([r, g, b, a].map(v=>v / gaussSum), i); } } return imgData; }; /** * @public * 暴露的异步模糊方法 * --------------------- * @param URL 图片地址,需要跨域支持 * @param r 模糊半径 {Int} * @param shrink 缩小比率 {Number} * @return {Promise} */ export const blur = (URL, r, shrink = 1)=> { return new Promise((resolve, reject)=> { const IMG = new Image(); IMG.crossOrigin = '*'; //需要图片跨域支持 IMG.onload = function () { const Canvas = document.createElement('CANVAS'); //大量使用可考虑只创建一次 let w = IMG.width, h = IMG.height; //缩小比例不为1时 , 重新计算宽高比 if (shrink !== 1) { w = Math.ceil(w / shrink); h = Math.ceil(h / shrink); r = Math.ceil(r / shrink); } //因为懒, 就全Try了, 实际上只 Try跨域错误 即可 try { //设置Canvas宽高,获取上下文 Canvas.width = w; Canvas.height = h; let ctx = Canvas.getContext('2d'); ctx.drawImage(IMG, 0, 0, w, h); //提取图片信息 let d = ctx.getImageData(0, 0, w, h); //进行高斯模糊 let gd = gaussBlur(d, r, 0); //绘制模糊图像 ctx.putImageData(gd, 0, 0); resolve(Canvas.toDataURL()); } catch (e) { reject(e); } }; IMG.src = URL; }) }; /** * @public * 暴露的异步模糊方法 * --------------------- * @param URL 图片地址,需要跨域支持 * @param r 模糊半径 {Int} * @param w 输出宽度 {Number} * @param h 输出高度 {Number} * @return {Promise} */ export const blurWH = (URL, r, w, h)=> { return new Promise((resolve, reject)=> { const IMG = new Image(); IMG.crossOrigin = '*'; //需要图片跨域支持 IMG.onload = function () { const Canvas = document.createElement('CANVAS'); //大量使用可考虑只创建一次 //锁定输出宽高之后, 就不需要Care 原图有多宽多高了 //let w = IMG.width, h = IMG.height; //因为懒, 就全Try了, 实际上只 Try跨域错误 即可 try { //设置Canvas宽高,获取上下文 Canvas.width = w; Canvas.height = h; let ctx = Canvas.getContext('2d'); ctx.drawImage(IMG, 0, 0, w, h); //提取图片信息 let d = ctx.getImageData(0, 0, w, h); //进行高斯模糊 let gd = gaussBlur(d, r, 0); //绘制模糊图像 ctx.putImageData(gd, 0, 0); resolve(Canvas.toDataURL()); } catch (e) { reject(e); } }; IMG.src = URL; }) };
╮(╯▽╰)╭
参考资料
《高斯模糊的算法》 - 阮一峰的网络日志
高斯模糊算法(gaussian)
欢迎关注“玄说-前端”微信公众号
------------福利时间--------------
本次赠书活动,赠送如下精选书籍:
1) 被称为通关 大厂面试 第一奇书的《你不知道的JavaScript》三卷。所有Js面试难题,都在此书范围内。本次赠书9本(3套)
2)js函数式编程是逼格提升利器,要高薪必备技能。本次活动赠送《JavaScript函数式编程指南》5本。
活动参与办法:
订阅号回复(切记,不是本篇文章下留言):pr。
我们会统计最终参与名单,随机抽取获奖者。
活动时间:
2019年12月16日--2019年12月21日。
2019年12月23日公布获奖名单。
--------
扫描下方二维码,加”助理“好友,回复”前端“,进入“玄说-前端” 微信群,可以参加额外的群内红包抽奖赠书活动。