当前位置：首页 > 软件库 > 手机/移动开发 > >

nativescript-image-filters

NativeScript plugin to apply filters to images

授权协议 View license

开发语言 JavaScript TypeScript

所属分类手机/移动开发

软件类型开源软件

地区不详

投递者闻人鸿文

操作系统 iOS

开源组织无

适用人群未知

软件概览

NativeScript-Image-Filters

Nativescript plugin for native image filters.

Sample

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>

使用案例

react-native image 设置默认图片

Image在加载网络失败后图片位置就是空白的，好像官方api没有提供对应的默认图片设置方法，所以就找了个笨办法，在image外面嵌套一层image用来展示默认图片，有更好的解决方案也给我说说 import React, {Component} from 'react'; import {TouchableOpacity, Image} from 'react-native'; export d
React Native图片缓存组件react-native-rn-cacheimage

额外推荐，RN常用第三方库https://zhuanlan.zhihu.com/p/69154149 共两种方案：一、react-native-rn-cacheimage 今天介绍一个React Native的图片缓存组件 react-native-rn-cacheimage ，纯JS实现，所以兼容性很好。大家都知道，其实React Native 的 Image 组件在 iOS 端实现了缓存，
React-Native-image-picker－调取摄像头第三方组件：

近期做的软件中图片处理是重点，那么自然也就用到了相机照相或者相册选取照片的功能。 react-native中有image-picker这个第三方组件，但是0.18.10这个版本还不是太支持iPad。这个组件同时支持photo和video，也就是照片和视频都可以用这个组件实现。安装 npm install --save react-native-image-picker 安装过之后要执行rnp
React Native 使用Image标签是对uri进行判空

判断对象不为空的方法： /*判断对象为空*/ isEmpty(obj){ if(typeof (obj) != 'number' && (!obj || obj == null || obj == ' ' || obj == undefined || typeof (obj) == 'undefined')){ return true;
react-native-customized-image-picker 图片组件使用方法

import ImagePicker from "react-native-customized-image-picker"; pickers(){ ImagePicker.openPicker({ multiple: true, maxSize:3-this.state.imagespath.length, spanCount:3, inc
react-native Image 组件

简单说一个 react-native Image 组件里面的resizeMode 属性： contain：保持图片宽高比，放入单你设置的width和height当中 cover：保持图片宽高比，直到宽度和高度都大于width和height当中 center：居中，居中不拉伸 repeat：重复平铺图片直到填满容器。图片会维持原始尺寸
Reactnative图片组件Image

Reactnative图片组件Image Reactnative内建了图片组件image来显示图片，这个组件既可以显示本地图片，也可以显示网络图片，还可以显示base64格式的图片引入组件使用Image组件首先要引入此组件 import {Image} from 'react-native 案例 import React,{Component} from 'react'; import {Vi
React Native Image

Image 静态图片资源 <Image source={require('./my-icon.png')} /> 针对不同的分辨率： . ├── button.js └── img ├── check@2x.png └── check@3x.png // Good way <Image source={require('./my-icon.png')} />; // BAD va

nativescript-image-filters

NativeScript-Image-Filters

Sample

Installation

Usage

TS

IMPORTANT NOTE

API

同类工具

相关阅读

相关文章

相关问答

相关文档