創建的一個快速的、接近高斯模糊的效果庫：StackBlur.js

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

項目主頁：http://www.baiduhome.net/lib/view/home/1448600069454