首页 > 代码库 > StackBlur.js

StackBlur.js

2024-08-12 04:18:47   214人阅读

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="http://www.mamicode.com/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="http://www.mamicode.com/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

StackBlur.js


联系
我们