react-native-image-utils
TypeScript icon, indicating that this package has built-in type declarations

0.0.12 • Public • Published

React Native Image Utils

Installation 🚀🚀

$ npm install react-native-image-utils --save

or

$ yarn add react-native-image-utils

then,

$ react-native link react-native-image-utils

Android Only

  1. If you do not already have openCV installed in your project, add this line to your settings.gradle
include ':openCVLibrary310'
project(':openCVLibrary310').projectDir = new File(rootProject.projectDir,'../node_modules/react-native-image-utils/android/ZdependencyZopenCVLibrary310')
  1. Add below into MainApplication.java
public class MainApplication extends Application implements ReactApplication {
    ////// insert this
    static{
        System.loadLibrary("opencv_java3");
    }
    /////////////////////

Usage

Rotating(90 degrees only) images

import { transOrientRotate } from 'react-native-image-utils'

...

const outputOption = null;
const uri = 'https://i.ytimg.com/vi/YCaGYUIfdy4/maxresdefault.jpg';
const param = {
    degrees: 90
}

transOrientRotate(null, uri, param)).then((response) => {                        
                        // 'response.uri' is new path of created image
                      }).catch((err) => {
                        console.error(err)
                      });

Multiful Executions (for saving performace)

Multiful calling functions is heavy because it creates image files in each calls. Here is the way efficientious. (It runs in order.)

import { proxies } from 'react-native-image-utils'

...

const uri = 'https://i.ytimg.com/vi/YCaGYUIfdy4/maxresdefault.jpg';

const commands = []

// color scaling
commands.push({
    cmd: 'scaleCSB',
    param: {
        contrast: 50,
        saturation: 10,
        brightness: -30,
    }
})

// then, cropping
commands.push({
    cmd: 'cropPerspective',
    param: {
        topLeft: ...,
        topRight: ...,
        bottomLeft: ...,
        bottomRight: ...,
        width: ...,
        height: ...,
    }
})

// then, do something more...
commands.push({
    cmd: ...,
    param: {
        ...
    }
})

...

// You can also choose some options for output file
const OutputOption = {
    format: 'JPEG',
    quality: 0.9,
    ...
}

// Let's execute commands
// One execute to multiful commands. It creates image file just 1 time.
proxies(OutputOption, uri, commands)
.then(res => {
    // 'response.uri' is new URI of created image
})
.catch(err => {
    console.error(err)
})

Interfaces

Name Description
cropPerspective cropping by perspective
cropRoundedCorner cropping rounded image
scaleCSB scaling color by Contrast, Saturation and Brightness. (In developping. It makes different result on ios and android.)
transOrientRotate rotating image by 90 degrees (90, 180, 270 only)
proxy single command calling
proxies multiful command calling

and, you can check any interfaces and parameters in index.d.ts file.

Output Options

Name Description
format Image file format
quality Image quality
path Specified path of new image file

Contribution

Welcome to anyone.

Package Sidebar

Install

npm i react-native-image-utils

Weekly Downloads

2

Version

0.0.12

License

MIT

Unpacked Size

251 MB

Total Files

286

Last publish

Collaborators

  • yangga