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')

2. 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.