文件列表:

.circleci (0, 2021-10-13)
.circleci\config.yml (1418, 2021-10-13)
.eslintrc.js (1448, 2021-10-13)
.flowconfig (1380, 2021-10-13)
.travis.yml (6758, 2021-10-13)
.watchmanconfig (2, 2021-10-13)
LICENSE (1082, 2021-10-13)
android (0, 2021-10-13)
android\.npmignore (96, 2021-10-13)
android\build.gradle (1551, 2021-10-13)
android\gradle.properties (152, 2021-10-13)
android\src (0, 2021-10-13)
android\src\main (0, 2021-10-13)
android\src\main\AndroidManifest.xml (135, 2021-10-13)
android\src\main\java (0, 2021-10-13)
android\src\main\java\com (0, 2021-10-13)
android\src\main\java\com\guhungry (0, 2021-10-13)
android\src\main\java\com\guhungry\rnphotomanipulator (0, 2021-10-13)
android\src\main\java\com\guhungry\rnphotomanipulator\RNPhotoManipulatorModule.java (6742, 2021-10-13)
android\src\main\java\com\guhungry\rnphotomanipulator\RNPhotoManipulatorPackage.java (926, 2021-10-13)
android\src\main\java\com\guhungry\rnphotomanipulator\utils (0, 2021-10-13)
android\src\main\java\com\guhungry\rnphotomanipulator\utils\ImageUtils.kt (3458, 2021-10-13)
android\src\main\java\com\guhungry\rnphotomanipulator\utils\ParamUtils.kt (1008, 2021-10-13)
babel.config.js (79, 2021-10-13)
docs (0, 2021-10-13)
docs\Getting-Started.md (2569, 2021-10-13)
docs\demo-background.jpg (160798, 2021-10-13)
docs\demo-icon.png (4365, 2021-10-13)
docs\result-batch.jpg (7271, 2021-10-13)
docs\result-crop-resize.jpg (2989, 2021-10-13)
... ...

# React Native Photo Manipulator Image processing library to edit photo programmatically in React Native [](https://npmjs.org/package/react-native-photo-manipulator "View this project on npm") [](https://github.com/guhungry/react-native-photo-manipulator/actions/workflows/test-and-rebuild.yml) ## Platform Supported * [x] Android * [x] iOS ## Getting started ### For react native 0.60 and above ```shell $ yarn add react-native-photo-manipulator ``` (or) ```shell $ npm install react-native-photo-manipulator ``` ### For react native 0.59 and below Please read [Get Started Guide](docs/Getting-Started.md) ## Usage Import library with ```javascript import RNPhotoManipulator from 'react-native-photo-manipulator'; ``` ## API * __Methods:__ * [`crop()`](README.md#crop-and-resize) * [`optimize()`](README.md#optimize) * [`overlayImage()`](README.md#overlay-image) * [`printText()`](README.md#print-text) * [`batch()`](README.md#batch) * __Types:__ * [`ImageSource`](README.md#imagesource) * [`PhotoBatchOperations`](README.md#photobatchoperations) * [`PhotoBatchOverlay`](README.md#photobatchoperations) * [`PhotoBatchPrintText`](README.md#photobatchoperations) * [`Point`](README.md#point) * [`Rect`](README.md#rect) * [`Size`](README.md#size) * [`TextOptions`](README.md#textoptions) ### Method #### 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`](README.md#imagesource) | Yes | The image | | `cropRegion` | [`Rect`](README.md#rect) | Yes | The region of image to be cropped | | `targetSize` | [`Size`](README.md#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`](README.md#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}`); }); ``` #### 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`](README.md#imagesource) | Yes | The background image | | `overlay` | [`ImageSource`](README.md#imagesource) | Yes | The overlay image | | `position` | [`Point`](README.md#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`](README.md#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`](README.md#imagesource) | Yes | The image | | `operations` | [`PhotoBatchOperations[]`](README.md#photobatchoperations) | Yes | The list of operations | | `cropRegion` | [`Rect`](README.md#rect) | Yes | The region of image to be cropped | | `targetSize` | [`Size`](README.md#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, cropRegion, targetSize, operations, 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](README.md#photobatchoverlay) or [print text](README.md#photobatchprinttext) operation #### PhotoBatchOverlay Overlay image batch operation | Property | Type | Description | | --------------- | ----------------------------------------- | ----------------------------------------------------- | | `operation` | "overlay" | | | `overlay` | [`ImageSource`](README.md#imagesource) | The overlay image | | `position` | [`Point`](README.md#point) | he position of overlay image in background image | #### PhotoBatchPrintText Print text batch operation | Property | Type | Description | | --------------- | ----------------------------------------- | ------------------------------------ | | `operation` | "text" | | | `options` | [`TextOptions`](README.md#textoptions) | The text attributes | #### 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`](README.md#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 |

近期下载者：

相关文件：

评论：[我要评论] [举报此文件]

收藏者：