React Native Photo Manipulator

React Native Image Processing API to edit photo programmatically for Android and iOS.

Platform Supported

• [x] Android
• [x] iOS

Getting started

For react native 0.60 and above

$ yarn add react-native-photo-manipulator

(or)

$ npm install react-native-photo-manipulator

For react native 0.59 and below

Please read Get Started Guide

Usage

Import library with

import RNPhotoManipulator from 'react-native-photo-manipulator';

API

• Methods:
  • crop()
  • optimize()
  • flipImage()
  • overlayImage()
  • printText()
  • batch()
• Types:
  • ImageSource
  • PhotoBatchOperations
  • PhotoBatchOverlay
  • PhotoBatchPrintText
  • PhotoBatchFlip
  • FlipMode
  • Point
  • Rect
  • Size
  • TextOptions

Method

Crop and resize

Crop image with cropRegion and resize to targetSize if specified

Signature

static crop(image: ImageSource, cropRegion: Rect, targetSize?: Size) => Promise<string>

| Parameter | Type | Required | Description | | --------------- | ----------------------------------------- | ------------ | ---------------------------------------------- | | image | ImageSource | Yes | The image | | cropRegion | Rect | Yes | The region of image to be cropped | | targetSize | Size | No | The target size of result image | | mimeType | 'image/jpeg', 'image/png' | No | Output file format |

Returns

Promise with image path in cache directory

Example

const image = "https://unsplash.com/photos/qw6qQQyYQpo/download?force=true";
const cropRegion = { x: 5, y: 30, height: 400, width: 250 };
const targetSize = { height: 200, width: 150 };

RNPhotoManipulator.crop(image, cropRegion, targetSize).then(path => {
    console.log(`Result image path: ${path}`);
});

Optimize

Save result image with specified quality between 0 - 100 in jpeg format

Signature

static optimize(image: ImageSource, quality: number) => Promise<string>

| Parameter | Type | Required | Description | | --------------- | ----------------------------------------- | ------------ | ---------------------------------------------- | | image | ImageSource | Yes | The image | | quality | number | Yes | The quality of result image between 0 - 100 |

Returns

Promise with image path in cache directory

Example

const image = "https://unsplash.com/photos/qw6qQQyYQpo/download?force=true";
const quality = 90;

RNPhotoManipulator.optimize(image, 90).then(path => {
    console.log(`Result image path: ${path}`);
});

Flip Image

Flip image horizontally, vertically or both

Signature

static flipImage(image: ImageSource, mode: FlipMode) => Promise<string>

| Parameter | Type | Required | Description | | --------------- | ----------------------------------------- | ------------ | ------------------------------------------------------ | | image | ImageSource | Yes | The background image | | mode | FlipMode | Yes | Flip mode Horizontal, Vertical or Both | | mimeType | 'image/jpeg', 'image/png' | No | Output file format |

Returns

Promise with image path in cache directory

Example

const image = "https://unsplash.com/photos/qw6qQQyYQpo/download?force=true";
const mode = FlipMode.Vertical;

RNPhotoManipulator.flipImage(image, mode).then(path => {
    console.log(`Result image path: ${path}`);
});

Overlay Image

Overlay image on top of background image

Signature

static overlayImage(image: ImageSource, overlay: ImageSource, position: Point) => Promise<string>

| Parameter | Type | Required | Description | | --------------- | ----------------------------------------- | ------------ | ------------------------------------------------------ | | image | ImageSource | Yes | The background image | | overlay | ImageSource | Yes | The overlay image | | position | Point | Yes | The position of overlay image in background image | | mimeType | 'image/jpeg', 'image/png' | No | Output file format |

Returns

Promise with image path in cache directory

Example

const image = "https://unsplash.com/photos/qw6qQQyYQpo/download?force=true";
const overlay = "https://www.iconfinder.com/icons/1174949/download/png/128";
const position = { x: 5, y: 20 };

RNPhotoManipulator.overlayImage(image, overlay, position).then(path => {
    console.log(`Result image path: ${path}`);
});

Print Text

Print texts into image

Signature

static printText(image: ImageSource, texts: TextOptions[]) => Promise<string>

| Parameter | Type | Required | Description | | --------------- | ----------------------------------------- | ------------ | ------------------------------------------------------ | | image | ImageSource | Yes | The image | | texts | TextOptions[] | Yes | The list of text operations | | mimeType | 'image/jpeg', 'image/png' | No | Output file format |

Returns

Promise with image path in cache directory

Example

const image = "https://unsplash.com/photos/qw6qQQyYQpo/download?force=true";
const texts = [
    { position: { x: 50, y: 30 }, text: "Text 1", textSize: 30, color: "#000000" },
    { position: { x: 50, y: 30 }, text: "Text 1", textSize: 30, color: "#FFFFFF", thickness: 3 }
];

RNPhotoManipulator.printText(image, texts).then(path => {
    console.log(`Result image path: ${path}`);
});

Batch

Crop, resize and do operations (overlay and printText) on image

Signature

static batch(image: ImageSource, operations: PhotoBatchOperations[], cropRegion: Rect, targetSize?: Size, quality?: number) => Promise<string>

| Parameter | Type | Required | Description | | --------------- | ----------------------------------------------------------- | ------------ | ------------------------------------------------- | | image | ImageSource | Yes | The image | | operations | PhotoBatchOperations[] | Yes | The list of operations | | cropRegion | Rect | Yes | The region of image to be cropped | | targetSize | Size | No | The target size of result image | | quality | number | No | The quality of result image between 0 - 100 | | mimeType | 'image/jpeg', 'image/png' | No | Output file format |

Returns

Promise with image path in cache directory

Example

const image = "https://unsplash.com/photos/qw6qQQyYQpo/download?force=true";
const cropRegion = { x: 5, y: 30, height: 400, width: 250 };
const targetSize = { height: 200, width: 150 };
const operations = [
    { operation: "text", options: { position: { x: 50, y: 30 }, text: "Text 1", textSize: 30, color: "#000000" } },
    { operation: "overlay", overlay: "https://www.iconfinder.com/icons/1174949/download/png/128", position: { x: 5, y: 20 } },
];
const quality = 90;

RNPhotoManipulator.batch(image, operations, cropRegion, targetSize, quality).then(path => {
    console.log(`Result image path: ${path}`);
});

Types

ImageSource

Image resource can be url or require()

| Type | Description | | --------- | ---------------------------------------------------------------- | | number | Image from require('path/to/image') | | string | Image from url supports file://, http://, https:// and ftp:// |

PhotoBatchOperations

Represent overlay image, print text or flip operation

PhotoBatchOverlay

Overlay image batch operation

| Property | Type | Description | | --------------- | ----------------------------------------- | ----------------------------------------------------- | | operation | "overlay" | | | overlay | ImageSource | The overlay image | | position | Point | he position of overlay image in background image |

PhotoBatchPrintText

Print text batch operation

| Property | Type | Description | | --------------- | ----------------------------------------- | ------------------------------------ | | operation | "text" | | | options | TextOptions | The text attributes |

PhotoBatchFlip

Flip image batch operation

| Property | Type | Description | | --------------- | ----------------------------------------- | -------------------------------------- | | operation | "flip" | | | mode | FlipMode | Flip mode Vertical, Horizontal or Both |

FlipMode

Enum represent flip Mode

| Enum | Description | | --------------- | ------------------------------------ | | Horizontal | Flip horizontal (y-axis) | | Vertical | Flip vertical (x-asis) | | Both | Flip vertical and horizontal |

Point

Represent position (x, y) from top-left of image

| Property | Type | Description | | --------------- | --------- | ------------------------------------ | | x | number | The x-axis coordinate from top-left | | y | number | The y-axis coordinate from top-left |

Rect

Represent area of region

| Property | Type | Description | | --------------- | --------- | ------------------------------------ | | x | number | The x-axis coordinate from top-left | | y | number | The y-axis coordinate from top-left | | width | number | The width of the region | | height | number | The height of the region |

Size

Represent size (width, height) of region or image

| Property | Type | Description | | --------------- | --------- | ------------------------ | | width | number | The width of the region | | height | number | The height of the region |

TextOptions

Represent attributes of text such as text, color, size, and etc.

| Property | Type | Required | Description | | --------------- | ----------------------------- | -------- | ---------------------------------------------- | | position | Point | Yes | The position of the text in background image | | text | string | Yes | The value of the text | | textSize | number | Yes | The size of the text | | fontName | string | No | The font name that can resolve by React NativeiOS: Use "PostScript name"Android: Use filename | | color | string | No | The color of the text | | thickness | number | No | The thickness (border width) of the region | | rotation | number | No | The rotation of text in degrees |