React Native Photo Manipulator

!Supports Android, iOS
!NPM License

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

$3

``shell
$ yarn add react-native-photo-manipulator
`
(or)
`shell
$ npm install react-native-photo-manipulator
`

$3

Please read Get Started Guide

$3

`shell
$ yarn expo install react-native-photo-manipulator
`
(or)
`shell
$ npx expo install react-native-photo-manipulator
`


Usage


Import library with
`javascript
import RNPhotoManipulator from 'react-native-photo-manipulator';
`

API

* __Methods:__
* crop()
* optimize()
* flipImage()
* rotateImage()
* overlayImage()
* printText()
* batch()

* __Types:__
* ImageSource
* PhotoBatchOperations
* PhotoBatchOverlay
* PhotoBatchPrintText
* PhotoBatchFlip
* PhotoBatchRotate
* FlipMode
* RotationMode
* Point
* Rect
* Size
* TextAlign
* TextDirection
* TextOptions

$3

#### Crop and resize
Crop image with cropRegion and resize to targetSize if specified

##### Signature
`typescript
static crop(image: ImageSource, cropRegion: Rect, targetSize?: Size) => Promise
`

| 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

`javascript
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
`typescript
static optimize(image: ImageSource, quality: number) => Promise
`

| 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

`javascript
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
`typescript
static flipImage(image: ImageSource, mode: FlipMode) => Promise
`

| 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

`javascript
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
`typescript
static rotateImage(image: ImageSource, mode: RotationMode) => Promise
`

| 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

`javascript
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
`typescript
static overlayImage(image: ImageSource, overlay: ImageSource, position: Point) => Promise
`

| 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

`javascript
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
`typescript
static printText(image: ImageSource, texts: TextOptions[]) => Promise
`

| Parameter | Type | Required | Description |
| --------------- | ----------------------------------------- | ------------ | ------------------------------------------------------ |
| image | ImageSource | Yes | The image |
| texts | [TextOptions[]](README.md#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

`javascript
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
`typescript
static batch(image: ImageSource, operations: PhotoBatchOperations[], cropRegion: Rect, targetSize?: Size, quality?: number) => Promise
`

| Parameter | Type | Required | Description |
| --------------- | ----------------------------------------------------------- | ------------ | ------------------------------------------------- |
| image | ImageSource | Yes | The image |
| operations | [PhotoBatchOperations[]](README.md#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

`javascript
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});
});
`

$3

#### 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, Left] |
| 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 |