https://github.com/dabanlee/blurify

blurify.js is a tiny(~2kb) library to blurred pictures, support graceful downgrade from `css` mode to `canvas` mode.
https://github.com/dabanlee/blurify

blur blurify canvas image

Last synced: 2 months ago
JSON representation

blurify.js is a tiny(~2kb) library to blurred pictures, support graceful downgrade from `css` mode to `canvas` mode.

• Host: GitHub
• URL: https://github.com/dabanlee/blurify
• Owner: dabanlee
• License: mit
• Created: 2017-03-01T13:49:12.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2022-07-20T01:49:17.000Z (over 2 years ago)
• Last Synced: 2024-04-24T05:59:14.882Z (9 months ago)
• Topics: blur, blurify, canvas, image
• Language: TypeScript
• Homepage:
• Size: 312 KB
• Stars: 685
• Watchers: 8
• Forks: 35
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# blurify

![npmsize](https://img.shields.io/bundlephobia/min/blurify)

blurify.js is a tiny(~2kb) library to blur pictures, with graceful downgrade support from `css` mode to `canvas` mode.

## Installation

```sh

$ npm i blurify

```

## DEMO

[Demo](https://dabanlee.github.io/blurify/)

## Usage

### blurify(options)

blurify the images with given `options`:

- `images` { Element }, blurify target elements.

- `blur` { Int }, extent of blur, defaulting to `6`.

- `mode` { String }, mode of blurify.

    - `css`: use `filter` property.(`default`)

    - `canvas`: use `canvas` export base64.

    - `auto`: use `css` mode firstly, otherwise switch to `canvas` mode by automatically.

```js

import blurify from 'blurify';

new blurify({

    images: document.querySelectorAll('.blurify'),

    blur: 6,

    mode: 'css',

});

// or in shorthand

blurify(6, document.querySelectorAll('.blurify'));

```

### License

Licensed under the [MIT License](https://github.com/dabanlee/blurify/blob/master/LICENSE)