guhungry / react-native-photo-manipulator

React Native Image Processing API to edit photo programmatically for Android and iOS. It features print text, overlay on another image (add watermark), resize, crop, flip, rotate and optimize image size then convert file format to jpeg or png
MIT License
342 stars 40 forks source link
image-manipulation image-processing react-native

React Native Photo Manipulator

build Supports Android, iOS NPM License npm version NPM Downloads NPM Downloads NPM Downloads Sonar Quality Gate Sonar Coverage

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

demo.webm

Platform Supported

Framework Android iOS
React Native ✔️ ✔️
Expo with development build ✔️ ✔️
Expo Go

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

For Expo with development build

$ yarn expo install react-native-photo-manipulator

(or)

$ npx expo install react-native-photo-manipulator

Usage

Import library with

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

API

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}`);
});
Result Crop Result Crop and Resize

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
Result Optimize
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
Result Flip
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}`);
});

Rotate Image

Rotate image 90° (90° Clockwise), 180° (Half Rotation) or 270° (90° Counterclockwise)

Signature
static rotateImage(image: ImageSource, mode: RotationMode) => Promise<string>
Parameter Type Required Description
image ImageSource Yes The background image
mode RotationMode Yes Rotation mode 90° (90° Clockwise), 180° (Half Rotation) or 270° (90° Counterclockwise)
mimeType 'image/jpeg', 'image/png' No Output file format
Returns

Promise with image path in cache directory

Example
Result Rotate
const image = "https://unsplash.com/photos/qw6qQQyYQpo/download?force=true";
const mode = RotationMode.R90;

RNPhotoManipulator.rotateImage(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
Result Overlay
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
Result Print Text
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
Result Batch
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://) or base64 encoded (data:image/png;base64,iVBORw...)

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

PhotoBatchRotate

Rotate image batch operation

Property Type Description
operation "rotate"
mode RotationMode Rotation mode 90° (90° Clockwise), 180° (Half Rotation) or 270° (90° Counterclockwise)

FlipMode

Enum represent flip Mode

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

RotationMode

Enum represent rotation Mode

Enum Description
R90 Rotate 90° (90° Clockwise)
R180 Rotate 180° (Half Rotation)
R270 Rotate 270° (90° Counterclockwise)

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

TextAlign

Enum represent text align

Enum Description
START Align text to the start of the line (e.g., left-aligned text in LTR, right-aligned text in RTL)
CENTER Align text to the center of the line
END Align text to the end of the line (e.g., right-aligned text in LTR, left-aligned text in RTL)

TextDirection

Enum represent text direction, this will affect coordinate and alignment

Enum Description
LTR Left-to-Right text direction (e.g., English, Spanish) [Top-Left, Right]
RTL Right-to-Left text direction (e.g., Arabic, Hebrew) [Top-Right, Right]

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
shadowRadius number No The shadow radius
shadowOffset Point No The shadow offset
shadowColor string No The color of the shadow
direction TextDirection No The direction of the text, default to TextDirection.LTR
align TextAlign No The direction of the text, default to TextAlign.START