StackBlur.js 是 Mario Klingemann 创建的一个快速的、接近高斯模糊的效果库。
- 更多信息: http://incubator.quasimondo.com/processing/fast_blur_deluxe.php
- Demo: http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
开始
安装引用
独立版本
要使用独立版本，需要从 Github 上下载 latest zip，或者 clone 库 。
git clone git@github.com:flozz/threadify.git
然后在你的 HTML 页面中引入dist/stackblur.js或者dist/stackblur.min.js文件。
<script src="StackBlur/dist/stackblur.js"></script>
NPM / Browserify
使用 NPM 包管理器，安装包：
npm install --save stackblur-canvas
在你需要的地方引用
var StackBlur = require("stackblur-canvas");
Bower
要使用 Bower package，安装包：
bower install stackblur-canvas
然后在你的 HTML 页面中引入dist/stackblur.js或者dist/stackblur.min.js文件：
<script src="bower_components/stackblur-canvas/dist/stackblur.js"></script>
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: 模糊半径
Hacking
构建
该库是使用 Grunt 构建的。如果你想修改src/目录下的内容，使用下面的命令来重新构建文件到dist/目录下：
grunt