首页指南参考教程
This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 51).

Expo ImageManipulator iconExpo ImageManipulator

A library that provides an API for image manipulation on the local file system.

Android
iOS
Web

expo-image-manipulator provides an API to modify images stored on the local file system.

Installation

Terminal
npx expo install expo-image-manipulator

If you are installing this in an existing React Native app (bare workflow), start by installing expo in your project. Then, follow the additional instructions as mentioned by library's README under "Installation in bare React Native projects" section.

Usage

This will first rotate the image 90 degrees clockwise, then flip the rotated image vertically and save it as a PNG.

Basic ImageManipulator usage
import { useState, useEffect } from 'react';
import { Button, Image, StyleSheet, View } from 'react-native';
import { Asset } from 'expo-asset';
import { manipulateAsync, FlipType, SaveFormat } from 'expo-image-manipulator';

export default function App() {
  const [ready, setReady] = useState(false);
  const [image, setImage] = useState(null);

  useEffect(() => {
    (async () => {
      const image = Asset.fromModule(require('./assets/snack-icon.png'));
      await image.downloadAsync();
      setImage(image);
      setReady(true);
    })();
  }, []);

  const _rotate90andFlip = async () => {
    const manipResult = await manipulateAsync(
      image.localUri || image.uri,
      [{ rotate: 90 }, { flip: FlipType.Vertical }],
      { compress: 1, format: SaveFormat.PNG }
    );
    setImage(manipResult);
  };

  const _renderImage = () => (
    <View style={styles.imageContainer}>
      <Image source={{ uri: image.localUri || image.uri }} style={styles.image} />
    </View>
  );

  return (
    <View style={styles.container}>
      {ready && image && _renderImage()}
      <Button title="Rotate and Flip" onPress={_rotate90andFlip} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  imageContainer: {
    marginVertical: 20,
    alignItems: 'center',
    justifyContent: 'center',
  },
  image: {
    width: 300,
    height: 300,
    resizeMode: 'contain',
  },
});

API

import * as ImageManipulator from 'expo-image-manipulator';

Constants

Android
iOS
Web

ImageManipulator.ImageManipulator

Type: ImageManipulator

Hooks

Android
iOS
Web

useImageManipulator(uri)

NameType
uristring

Returns:

Context

Classes

Android
iOS
Web

Context

Type: Class extends SharedObject

A context for an image manipulation. It provides synchronous, chainable functions that schedule transformations on the original image to the background thread. Use an asynchronous renderAsync to await for all transformations to finish and access the final image.

Context Methods

Android
iOS
Web

crop(rect)

NameTypeDescription
rect{ height: number, originX: number, originY: number, width: number }

Fields specify top-left corner and dimensions of a crop rectangle.


Crops the image to the given rectangle's origin and size.

Returns:

Context

Web

extent(options)

NameType
options{ backgroundColor: null | string, height: number, originX: number, originY: number, width: number }

Set the image size and offset. If the image is enlarged, unfilled areas are set to the backgroundColor. To position the image, use originX and originY.

Returns:

Context

Android
iOS
Web

flip(flipType)

NameTypeDescription
flipType'vertical' | 'horizontal'

An axis on which image will be flipped. Only one flip per transformation is available. If you want to flip according to both axes then provide two separate transformations.


Flips the image vertically or horizontally.

Returns:

Context

Android
iOS
Web

renderAsync()

Awaits for all manipulation tasks to finish and resolves with a reference to the resulted native image.

Returns:

Promise<ImageRef>

Android
iOS
Web

reset()

Resets the manipulator context to the originally loaded image.

Returns:

Context

Android
iOS
Web

resize(size)

NameTypeDescription
size{ height: null | number, width: null | number }

Values correspond to the result image dimensions. If you specify only one value, the other will be calculated automatically to preserve image ratio.


Resizes the image to the given size.

Returns:

Context

Android
iOS
Web

rotate(degrees)

NameTypeDescription
degreesnumber

Degrees to rotate the image. Rotation is clockwise when the value is positive and counter-clockwise when negative.


Rotates the image by the given number of degrees.

Returns:

Context

Android
iOS
Web

ImageManipulator

Type: Class extends _default

ImageManipulator Properties

Android
iOS
Web

Context

Type: Context

Android
iOS
Web

Image

Type: ImageRef

ImageManipulator Methods

Android
iOS
Web

manipulate(uri)

NameType
uristring

Loads an image from the given URI and creates a new image manipulation context.

Returns:

Context

Android
iOS
Web

ImageRef

Type: Class extends SharedObject

A reference to a native instance of the image.

ImageRef Properties

ImageRef Methods

Android
iOS
Web

saveAsync(options)

NameTypeDescription
options
(optional)
SaveOptions

A map defining how modified image should be saved.


Saves the image to the file system in the cache directory.

Methods

Deprecated It has been replaced by the new, contextual and object-oriented API. Use ImageManipulator.manipulate or useImageManipulator instead.

Android
iOS
Web

ImageManipulator.manipulateAsync(uri, actions, saveOptions)

NameTypeDescription
uristring

URI of the file to manipulate. Should be on the local file system or a base64 data URI.

actions
(optional)
Action[]

An array of objects representing manipulation options. Each object should have only one of the keys that corresponds to specific transformation.

Default: []
saveOptions
(optional)
SaveOptions

A map defining how modified image should be saved.

Default: {}

Manipulate the image provided via uri. Available modifications are rotating, flipping (mirroring), resizing and cropping. Each invocation results in a new file. With one invocation you can provide a set of actions to perform over the image. Overwriting the source file would not have an effect in displaying the result as images are cached.

Returns:

Promise<ImageResult>

Promise which fulfils with ImageResult object.

Types

Android
iOS
Web

Action

Literal Type: multiple types

Acceptable values are: ActionResize | ActionRotate | ActionFlip | ActionCrop | ActionExtent

Android
iOS
Web

ActionCrop

NameTypeDescription
crop{ height: number, originX: number, originY: number, width: number }

Fields specify top-left corner and dimensions of a crop rectangle.

Android
iOS
Web

ActionExtent

NameTypeDescription
extent{ backgroundColor: string | null, height: number, originX: number, originY: number, width: number }
Only for:
Web

Set the image size and offset. If the image is enlarged, unfilled areas are set to the backgroundColor. To position the image, use originX and originY.

Android
iOS
Web

ActionFlip

NameTypeDescription
flipFlipType

An axis on which image will be flipped. Only one flip per transformation is available. If you want to flip according to both axes then provide two separate transformations.

Android
iOS
Web

ActionResize

NameTypeDescription
resize{ height: number, width: number }

Values correspond to the result image dimensions. If you specify only one value, the other will be calculated automatically to preserve image ratio.

Android
iOS
Web

ActionRotate

NameTypeDescription
rotatenumber

Degrees to rotate the image. Rotation is clockwise when the value is positive and counter-clockwise when negative.

Android
iOS
Web

ImageResult

NameTypeDescription
base64
(optional)
string

It is included if the base64 save option was truthy, and is a string containing the JPEG/PNG (depending on format) data of the image in Base64. Prepend that with 'data:image/xxx;base64,' to get a data URI, which you can use as the source for an Image element for example (where xxx is jpeg or png).

heightnumber

Height of the image or video.

uristring

An URI to the modified image (usable as the source for an Image or Video element).

widthnumber

Width of the image or video.

Android
iOS
Web

SaveOptions

A map defining how modified image should be saved.

NameTypeDescription
base64
(optional)
boolean

Whether to also include the image data in Base64 format.

compress
(optional)
number

A value in range 0.0 - 1.0 specifying compression level of the result image. 1 means no compression (highest quality) and 0 the highest compression (lowest quality).

format
(optional)
SaveFormat

Specifies what type of compression should be used and what is the result file extension. SaveFormat.PNG compression is lossless but slower, SaveFormat.JPEG is faster but the image has visible artifacts. Defaults to SaveFormat.JPEG

Enums

Android
iOS
Web

FlipType

FlipType Values

Horizontal

FlipType.Horizontal = "horizontal"

Vertical

FlipType.Vertical = "vertical"
Android
iOS
Web

SaveFormat

SaveFormat Values

JPEG

SaveFormat.JPEG = "jpeg"

PNG

SaveFormat.PNG = "png"

WEBP

SaveFormat.WEBP = "webp"
Expo 中文网 - 粤ICP备13048890号