A collection of image processing tools for React Native
$ npm install react-native-image-tools-wm --save
$ react-native link react-native-image-tools-wm
Libraries
➜ Add Files to [your project's name]
node_modules
➜ react-native-image-tools-wm
and add RNImageTools.xcodeproj
libRNImageTools.a
to your project's Build Phases
➜ Link Binary With Libraries
Cmd+R
)pod 'RNImageTools', :path => '../node_modules/react-native-image-tools-wm'
to your ios/Podfile
pod install
while in ios
directoryandroid/app/src/main/java/[...]/MainApplication.java
import net.wowmaking.RNImageToolsPackage;
to the imports at the top of the filenew RNImageToolsPackage()
to the list returned by the getPackages()
methodandroid/settings.gradle
:
include ':react-native-image-tools-wm'
project(':react-native-image-tools-wm').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-tools-wm/android')
android/app/build.gradle
:
implementation project(':react-native-image-tools-wm')
import RNImageTools from 'react-native-image-tools-wm';
See examples in the API section.
RNImageTools.mask(image, maskImage, {
trimTransparency: true
}).then(({ uri, width, height }) => {
// Sync with your app state
}).catch(console.error);
RNImageTools.transform(image, 10, -10, 1.25, 45)
.then(({ uri, width, height }) => {
// Sync with your app state
})
.catch(console.error);
RNImageTools.resize(image, 500, 500)
.then(({ uri, width, height }) => {
// Sync with your app state
})
.catch(console.error);
RNImageTools.crop(image, 100, 100, 500, 500)
.then(({ uri, width, height }) => {
// Sync with your app state
})
.catch(console.error);
Creates a bitmap with white background and draws a black shape from provided points. It's intended usage is to generate mask images on the fly.
RNImageTools.createMaskFromShape({
points: [
{ x: 20, y: 20 },
{ x: 200, y: 200 },
{ x: 200, y: 20 },
{ x: 20, y: 20 },
],
width: 500,
height: 500,
inverted: false,
}).then(({ uri, width, height }) => {
// Sync with your app state
}).catch(console.error);
RNImageTools.merge(
[
image1,
image2,
image3,
]
).then(({ uri, width, height }) => {
// Sync with your app state
}).catch(console.error);