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 Native iOS: 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