Skip to content
NativeScript plugin to apply filters to images
TypeScript Shell JavaScript
Branch: master
Clone or download
Pull request Compare This branch is 5 commits ahead of bradmartin:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
publish
screens
src
.gitignore
.prettierrc
LICENSE
README.md
tslint.json fix linter Mar 1, 2019

README.md

npm npm Build Status GitHub stars PayPal Donate

NativeScript-Image-Filters

Nativescript plugin for native image filters.

Sample

Demo

Installation

From your command prompt/termial go to your app's root folder and execute:

tns plugin add nativescript-image-filters

Usage

JS:

import { topmost } from 'ui/frame';
import { ImageFilters } from 'nativescript-image-filters';

const filters = new ImageFilters();

public effectOne() {
  const pic = topmost().currentPage.getViewById('myPicture');

      filters.invert(pic).then((result) => {

      // set the pic imageSource equal to the new imageSource
      pic.imageSource = result;

    }).catch((err) => {
      console.log('applyFilter ERROR: ' + err);
    });
}

IMPORTANT NOTE

Not all methods have been tested. The code needs to be cleaned up to reduce duplication in methods. The methods also need to be 1:1 for common methods. Right now not all iOS & Android methods are named correctly for the image filter. Pull requests are very welcome to improve the API for this plugin.

API

  • highlightImage(img: Image, color: string, radius?: number): Promise<ImageSource>
  • invert(img: Image): Promise<ImageSource>
  • blackAndWhite(img: Image): Promise<ImageSource>
  • gamma(img: Image, red: number, green: number, blue: number): Promise<ImageSource>
  • colorFilter(img: Image, red: number, green: number, blue: number): Promise<ImageSource>
  • sepiaEffect(img: Image, depth: number, red: number, green: number, blue: number): Promise<ImageSource>
  • decreaseColorDepth(img: Image, bitOffset: number): Promise<ImageSource>
  • contrast(img: Image, value: number): Promise<ImageSource>
  • rotate(img: Image, degree: number): Promise<ImageSource>
  • brightness(img: Image, value: number): Promise<ImageSource>
  • gaussianBlur(img: Image): Promise<ImageSource>
  • createShadow(img: Image): Promise<ImageSource>
  • sharpen(img: Image, weight: number): Promise<ImageSource>
  • meanRemoval(img: Image): Promise<ImageSource>
  • smooth(img: Image, value: number): Promise<ImageSource>
  • emboss(img: Image): Promise<ImageSource>
  • engrave(img: Image): Promise<ImageSource>
  • boost(img: Image, type: number, percent: number): Promise<ImageSource>
  • roundCorner(img: Image, round: number): Promise<ImageSource>
  • waterMark(img: Image, watermark: string, location: android.graphic.Point, color: string, alpha: number, size: number, underline: boolean): Promise<ImageSource>
  • flip(img: Image, type: number): Promise<ImageSource>
  • tintImage(img: Image, degree: number): Promise<ImageSource>
  • fleaEffect(img: Image): Promise<ImageSource>
  • blackFilter(img: Image): Promise<ImageSource>
  • snowEffect(img: Image): Promise<ImageSource>
  • shadingFilter(img: Image, shadingColor: number): Promise<ImageSource>
  • saturationFilter(img: Image, level: number): Promise<ImageSource>
  • hueFilter(img: Image, level: number): Promise<ImageSource>
  • reflection(img: Image): Promise<ImageSource>
  • replaceColor(img: Image, fromColor: string, toColor: string): Promise<ImageSource>
You can’t perform that action at this time.