stackblur-canvas

2018-07-12 admin

stackblur-canvas是什么

什么是stackblur-canvas,Fast and almost Gaussian blur by Mario Klingemann

stackblur-canvas介绍、stackblur-canvas使用

NPM VersionBowerLicense

StackBlur.js is a fast, almost Gaussian blur created by Mario Klingemann.

Original source:

Getting Started

Standalone version

To use the standalone version,

download the latest zip from Github or clone the repository

git clone git@github.com:flozz/StackBlur.git

and include the dist/stackblur.js or dist/stackblur.min.js file in your HTML page:

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

NPM / Browserify

To use the NPM package,

install the package

npm install --save stackblur-canvas

and require it where needed

var StackBlur = require("stackblur-canvas");

Bower

To use the Bower package,

Install the package

bower install stackblur-canvas

and include the dist/stackblur.js or dist/stackblur.min.js file in your HTML page:

<script src="bower_components/stackblur-canvas/dist/stackblur.js"></script>

API

Image as source:

StackBlur.image(sourceImage, targetCanvas, radius, blurAlphaChannel);
  • sourceImage: the HTMLImageElement or its id.
  • targetCanvas: the HTMLCanvasElement or its id.
  • radius: the radius of the blur.
  • blurAlphaChannel: Set it to true if you want to blur a RGBA image (optional, default = false)

RGBA Canvas as source:

StackBlur.canvasRGBA(targetCanvas, top_x, top_y, width, height, radius);
  • targetCanvas: the HTMLCanvasElement.
  • top_x: the horizontal coordinate of the top-left corner of the rectangle to blur.
  • top_y: the vertical coordinate of the top-left corner of the rectangle to blur.
  • width: the width of the rectangle to blur.
  • height: the height of the rectangle to blur.
  • radius: the radius of the blur.

RGB Canvas as source:

StackBlur.canvasRGB(targetCanvas, top_x, top_y, width, height, radius);
  • targetCanvas: the HTMLCanvasElement.
  • top_x: the horizontal coordinate of the top-left corner of the rectangle to blur.
  • top_y: the vertical coordinate of the top-left corner of the rectangle to blur.
  • width: the width of the rectangle to blur.
  • height: the height of the rectangle to blur.
  • radius: the radius of the blur.

RGBA ImageData as source:

StackBlur.imageDataRGBA(imageData, top_x, top_y, width, height, radius);
  • imageData: the canvas’ ImageData.
  • top_x: the horizontal coordinate of the top-left corner of the rectangle to blur.
  • top_y: the vertical coordinate of the top-left corner of the rectangle to blur.
  • width: the width of the rectangle to blur.
  • height: the height of the rectangle to blur.
  • radius: the radius of the blur.

RGB ImageData as source:

StackBlur.imageDataRGB(imageData, top_x, top_y, width, height, radius);
  • imageData: the canvas’ ImageData.
  • top_x: the horizontal coordinate of the top-left corner of the rectangle to blur.
  • top_y: the vertical coordinate of the top-left corner of the rectangle to blur.
  • width: the width of the rectangle to blur.
  • height: the height of the rectangle to blur.
  • radius: the radius of the blur.

Hacking

Building

This library is built using Grunt. If you change somthing in the src/ folder, use the following command to re-build the files in the dist/ folder:

grunt

Changelog

  • 1.4.1: Moves grunt-cli to devDependencies (#23)
  • 1.4.0: Allows the lib to be used with node-canvas
  • 1.3.0: TypeScript typings added
  • 1.2.1: Includes built files in the NPM packgage
  • 1.2.0: Remove alerts and obsolete netscape.security.PrivilegeManager
  • 1.1.0: Allow blur to be applied to ImageData directly (thanks @WebSeed)
  • 1.0.0: First Release

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-35829.html

文章标题:stackblur-canvas

回到顶部