Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-native-photo-manipulator with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-native/package.json"); // react-native is a peer dependency. var reactNativePhotoManipulator = require("react-native-photo-manipulator")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-native-photo-manipulator v1.2.1

Image processing library to edit photo programmatically in React Native

React Native Photo Manipulator

Image processing library to edit photo programmatically in React Native

Build Status npm version

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

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>
ParameterTypeRequiredDescription
imageImageSourceYesThe image
cropRegionRectYesThe region of image to be cropped
targetSizeSizeNoThe target size of result image
mimeType'image/jpeg', 'image/png'NoOutput 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, size: 400, width: 250 };
const targetSize = { size: 200, width: 150 };

PhotoManipulator.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>
ParameterTypeRequiredDescription
imageImageSourceYesThe image
qualitynumberYesThe 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;

PhotoManipulator.optimize(image, 90).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>
ParameterTypeRequiredDescription
imageImageSourceYesThe background image
overlayImageSourceYesThe overlay image
positionPointYesThe position of overlay image in background image
mimeType'image/jpeg', 'image/png'NoOutput 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 };

PhotoManipulator.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>
ParameterTypeRequiredDescription
imageImageSourceYesThe image
textsTextOptions[]YesThe list of text operations
mimeType'image/jpeg', 'image/png'NoOutput 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 }
];

PhotoManipulator.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>
ParameterTypeRequiredDescription
imageImageSourceYesThe image
operationsPhotoBatchOperations[]YesThe list of operations
cropRegionRectYesThe region of image to be cropped
targetSizeSizeNoThe target size of result image
qualitynumberNoThe quality of result image between 0 - 100
mimeType'image/jpeg', 'image/png'NoOutput 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, size: 400, width: 250 };
const targetSize = { size: 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;

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

Types

ImageSource

Image resource can be url or require()

TypeDescription
numberImage from require('path/to/image')
stringImage from url supports file://, http://, https:// and ftp://

PhotoBatchOperations

Represent overlay image or print text operation

PhotoBatchOverlay

Overlay image batch operation

PropertyTypeDescription
operation"overlay"
overlayImageSourceThe overlay image
positionPointhe position of overlay image in background image

PhotoBatchPrintText

Print text batch operation

PropertyTypeDescription
operation"text"
optionsTextOptionsThe text attributes

Point

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

PropertyTypeDescription
xnumberThe x-axis coordinate from top-left
ynumberThe y-axis coordinate from top-left

Rect

Represent area of region

PropertyTypeDescription
xnumberThe x-axis coordinate from top-left
ynumberThe y-axis coordinate from top-left
widthnumberThe width of the region
heightnumberThe height of the region

Size

Represent size (width, height) of region or image

PropertyTypeDescription
widthnumberThe width of the region
heightnumberThe height of the region

TextOptions

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

PropertyTypeDescription
positionPointThe position of the text in background image
textstringThe value of the text
textSizenumberThe size of the text
colorstringThe color of the text
thicknessnumberThe thickness (border width) of the region
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free