StackBlur.js - 实现Canvas高斯模糊效果

越来越多的app在背景图中使用高斯模糊效果,如yahoo天气,感觉效果做得很炫。现在使用StackBlur.js在网页上也可以对Canvas实现高斯模糊效果,运行相当流畅,画面一点不卡。

引入资源

在网页中引入StackBlur.js

<script src="js/StackBlur.js"></script>

Html部分

<img id="kitten" src="image/cat.jpg" style="display:none" />
<p><canvas id="canvas01" width="220" height="208"></canvas></p>

Javascript代码

stackBlurImage('kitten', 'canvas01', 23);

就是如此简单,另外stackBlur提供了3个函数实现模糊效果

//用于将图片模糊绘制到canvas
stackBlurImage( sourceImageID, targetCanvasID, radius, blurAlphaChannel );
//用于对Canvas矩形区域执行RGBA模糊
stackBlurCanvasRGBA( targetCanvasID, top_x, top_y, width, height, radius );
//用于对Canvas矩形区域执行RGB模糊,不考虑Alpha值
stackBlurCanvasRGB( targetCanvasID, top_x, top_y, width, height, radius );

API 调用

下面是针对不同的源(图片或者 Canvas 等)进行 StackBlur 的调用。

图像作为源:

StackBlur.image(sourceImage, targetCanvas, radius, blurAlphaChannel);

  • sourceImage:HTMLImageElement或者它的id

  • targetCanvas:HTMLCanvasElement或者它的id

  • radius:模糊半径

  • blurAlphaChannel: 如果你想模糊一个 RGBA 的图像,就将其设置为true(可选,默认 =false)

RGBA Canvas 作为源:

StackBlur.canvasRGBA(targetCanvas, top_x, top_y, width, height, radius);

  • targetCanvas: HTMLCanvasElement

  • top_x: 要模糊的矩形的左上角的水平坐标

  • top_y: 要模糊的矩形的左上角的垂直坐标

  • width: 要模糊的矩形宽度

  • height: 要模糊的矩形高度

  • radius: 模糊半径

RGB Canvas 作为源:

StackBlur.canvasRGB(targetCanvas, top_x, top_y, width, height, radius);

  • targetCanvas: HTMLCanvasElement

  • top_x: 要模糊的矩形的左上角的水平坐标

  • top_y: 要模糊的矩形的左上角的垂直坐标

  • width: 要模糊的矩形宽度

  • height: 要模糊的矩形高度

  • radius: 模糊半径

RGBA ImageData 作为源:

StackBlur.imageDataRGBA(imageData, top_x, top_y, width, height, radius);

  • imageData: canvas 的ImageData

  • top_x:要模糊的矩形的左上角的水平坐标

  • top_y: 要模糊的矩形的左上角的垂直坐标

  • width: 要模糊的矩形宽度

  • height: 要模糊的矩形高度

  • radius: 模糊半径

RGB ImageData 作为源:

StackBlur.imageDataRGB(imageData, top_x, top_y, width, height, radius);

  • imageData: canvas 的ImageData

  • top_x:要模糊的矩形的左上角的水平坐标

  • top_y: 要模糊的矩形的左上角的垂直坐标

  • width: 要模糊的矩形宽度

  • height: 要模糊的矩形高度

  • radius: 模糊半径

在线演示:http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

GitHub:https://github.com/flozz/StackBlur


赞(52) 打赏
未经允许不得转载:优客志 » 前端设计
分享到:

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏