
Stack Blur
Blur effect on image
$2.00
Details
- Version:
- 1.0
- Ionic:
- 3.x
- Platforms:
- iOS, Android
- Released:
- 4 years ago
- Updated:
- 3 years ago
- Category:
- Plugins
- Tags:
- ,
Stack Blur for Angular v2/v4 and Ionic v2/v3 is the component that adds blur effect on images in your app (demo). In background it uses stackblur-canvas, so don't forget to install it as (npm) dependency in your app.
Installation:
- Download the zip file and unzip it;
- Copy files from
mama-stack-blur/src
and paste them intosrc
folder within your project; - Import component in
app.module.ts
:
```javascript import { MamaStackBlur } from 'path/to/mama-stack-blur'; ...
@NgModule({ declarations: [ ..., MamaStackBlur ], ... }) export class AppModule {} ```
Usage:
In your view, add:
html
<!-- Other content -->
<mama-stack-blur [imageUrl]="image.url"
[width]="image.width"
[height]="image.height">
</mama-stack-blur>
<!-- Other content -->
or for multiple images:
html
<!-- Other content -->
<mama-stack-blur *ngFor="let image of images; let i = index"
[imageUrl]="image.url"
[width]="image.width"
[height]="image.height"
[radius]="i">
</mama-stack-blur>
<!-- Other content -->
Options:
[imageUrl]
(required string) - url of an image to show and blur;[width]
(required number) - width of an image;[height]
(required number) - height of an image;[radius]
(optional number, default is 10) - the radius of the blur;[blurAlpha]
(optional boolean, default is false) - if you are blurring a RGBA image;