首页指南参考教程

Expo ImageManipulator

提供用于在本地文件系统上进行图片操作的 API 的库。

Android

iOS

Web

expo-image-manipulator 提供了一个 API 来修改存储在本地文件系统上的图片。

¥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

这将首先将图片顺时针旋转 90 度，然后垂直翻转旋转的图片并将其另存为 PNG。

¥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 React, { 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';

Methods

`ImageManipulator.manipulateAsync(uri, actions, saveOptions)`

Name	Type	Description
uri	`string`	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

`Action`

Literal Type: multiple types

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

`ActionCrop`

Name	Type	Description
crop	`{ height: number, originX: number, originY: number, width: number }`	Fields specify top-left corner and dimensions of a crop rectangle.

`ActionExtent`

Name	Type	Description
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`.

`ActionFlip`

Name	Type	Description
flip	`FlipType`	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.

`ActionResize`

Name	Type	Description
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.

`ActionRotate`

Name	Type	Description
rotate	`number`	Degrees to rotate the image. Rotation is clockwise when the value is positive and counter-clockwise when negative.

`ImageResult`

Name	Type	Description
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`).
height	`number`	Height of the image or video.
uri	`string`	An URI to the modified image (usable as the source for an `Image` or `Video` element).
width	`number`	Width of the image or video.

`SaveOptions`

A map defining how modified image should be saved.

Name	Type	Description
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

`FlipType`

FlipType Values

`Horizontal`

FlipType.Horizontal ＝ "horizontal"

`Vertical`

FlipType.Vertical ＝ "vertical"

`SaveFormat`

SaveFormat Values

`JPEG`

SaveFormat.JPEG ＝ "jpeg"

`PNG`

SaveFormat.PNG ＝ "png"

`WEBP`

SaveFormat.WEBP ＝ "webp"