StackBlur.js

Posted 2020-08-07 黑客

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 [email protected]: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.open-open.com/lib/view/home/1448600069454