Stack Blur

Stack Blur

Blur effect on image

$2.00

CodExplorerLegacy

CodExplorerLegacy

Member since 2015

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 into src 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;