Necessary Pigeonholing Mechanism
    Wondering what’s next for npm?Check out our public roadmap! »

    stackblur-canvas

    2.5.0 • Public • Published

    StackBlur.js

    NPM Version License

    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>

    Node

    To use the NPM package,

    install the package:

    npm install --save stackblur-canvas
    

    and require it where needed

    const StackBlur = require('stackblur-canvas');

    Browsers

    If you are only supporting modern browsers, you may use ES6 Modules directly:

    import * as StackBlur from
      './node_modules/stackblur-canvas/dist/stackblur-es.min.js';

    Or, if you are using Rollup in your own project, use the node-resolve plugin, and import by just referencing the module:

    import * as StackBlur from 'stackblur-canvas';

    API

    See also the docs in docs/jsdoc.

    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 Rollup. If you change something in the src/ folder, use the following command to re-build the files in the dist/ folder:

    npm run rollup

    Install

    npm i stackblur-canvas

    DownloadsWeekly Downloads

    647,651

    Version

    2.5.0

    License

    MIT

    Unpacked Size

    149 kB

    Total Files

    15

    Last publish

    Collaborators

    • avatar
    • avatar