Skip to content

bradmartin/nativescript-image-filters

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

68 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Build CI npm GitHub stars

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:

NativeScript Version 7+: tns plugin add nativescript-image-filters

NativeScript Verion prior to 7: tns plugin add nativescript-image-filters@3.0.0

Usage

TS

import { Frame, Image, ImageSource } from '@nativescript/core';
import { ImageFilters } from 'nativescript-image-filters';

const filters = new ImageFilters();

public effectOne() {
  const pic = Frame.topmost().getViewById('myPicture') as Image;

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

      // set the pic src equal to the new imageSource result from the filter method promise result
      pic.src = 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>

About

NativeScript plugin to apply filters to images

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 2

  •  
  •  
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy