expo-image-manipulator - Amazon Vega Docs

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

Installation

Add the JavaScript library dependency in the package.json file.

"dependencies": {
     ...
    "@amazon-devices/expo-image-manipulator": "~2.0.0",
    "@amazon-devices/keplerscript-turbomodule-api": "~1.0.0",
    ...
}

Reinstall dependencies using npm install command.

Example

The example below demonstrates how to perform a single manipulation on the image.

import * as ImageManipulator from '@amazon-devices/expo-image-manipulator';
import React, {useState, useEffect} from 'react';
import {Button, Image, StyleSheet, View} from 'react-native';

type ImageType = {
  uri: string;
  localUri?: string;
};

export const App = () => {
  const [ready, setReady] = useState(false);
  const [image, setImage] = useState<ImageType | null>(null);

  useEffect(() => {
    (async () => {
      const image = require('./assets/vega.png');
      const imageUri = Image.resolveAssetSource(image).uri;
      setImage({uri: imageUri});
      setReady(true);
    })();
  }, []);

  const manipulate = async () => {
    if (image) {
      const result = await ImageManipulator.manipulateAsync(
        image.localUri || image.uri,
        [{flip: ImageManipulator.FlipType.Vertical}],
      );
      setImage(result);
    }
  };

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

  return (
    <View style={styles.container}>
      {ready && image && renderImage()}
      <Button title="Manipulate" onPress={manipulate} />
    </View>
  );
};

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

The example below demonstrates how to perform multiple manipulations on the image.

import * as ImageManipulator from '@amazon-devices/expo-image-manipulator';
import React, {useState, useEffect} from 'react';
import {Button, Image, StyleSheet, View} from 'react-native';

type ImageType = {
  uri: string;
  localUri?: string;
};

export const App = () => {
  const [ready, setReady] = useState(false);
  const [image, setImage] = useState<ImageType | null>(null);

  useEffect(() => {
    (async () => {
      const image = require('./assets/vega.png');
      const imageUri = Image.resolveAssetSource(image).uri;
      setImage({uri: imageUri});
      setReady(true);
    })();
  }, []);

  const manipulate = async () => {
    if (image) {
      const result = await ImageManipulator.manipulateAsync(image.uri, [
        {flip: ImageManipulator.FlipType.Vertical},
        {rotate: 90},
      ]);
      setImage({uri: result.uri});
    }
  };

  const renderImage = () => (
    <View style={styles.imageContainer}>
      {!!image && <Image source={{uri: image.uri}} style={styles.image} />}
    </View>
  );

  return (
    <View style={styles.container}>
      {ready && image && renderImage()}
      <Button title="Manipulate" onPress={manipulate} />
    </View>
  );
};

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

The example below demonstrates how to specify custom save options.

import * as ImageManipulator from '@amazon-devices/expo-image-manipulator';
import React, {useState, useEffect} from 'react';
import {Button, Image, StyleSheet, Text, View} from 'react-native';

type ImageType = {
  uri: string;
  localUri?: string;
};

export const App = () => {
  const [ready, setReady] = useState(false);
  const [image, setImage] = useState<ImageType | null>(null);
  const [base64, setBase64] = useState<string>();

  useEffect(() => {
    (async () => {
      const image = require('./assets/vega.png');
      const imageUri = Image.resolveAssetSource(image).uri;
      setImage({uri: imageUri});
      setReady(true);
    })();
  }, []);

  const manipulate = async () => {
    if (image) {
      const result = await ImageManipulator.manipulateAsync(
        image.localUri || image.uri,
        [{rotate: 90}],
        {
          base64: true,
          compress: 0.5,
          format: ImageManipulator.SaveFormat.PNG,
        },
      );
      setImage({
        uri: result.uri,
        localUri: result.uri,
      });
      setBase64(result.base64);
    }
  };

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

  return (
    <View style={styles.container}>
      {ready && image && renderImage()}
      <Button title="Manipulate" onPress={manipulate} />
      <Text style={styles.text}>{`Base64: ${
        base64 ? base64.slice(0, 30) : 'None'
      }`}</Text>
    </View>
  );
};

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

API reference

Check out the dedicated documentation page for info about this library, API reference and more: Official Expo documentation for expo-image-manipulator.

Methods

Method	Description
`manipulateAsync`	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

Implementation details

saveOptions.compress - compress currently doesn’t work on Vega, images are always saved with the highest quality (as if value 1.0 was passed).

Supported versions

NPM package version	Vega SDK version	Vega OS version	React Native version
~2.0.0	0.23 and earlier	`OS 1.1 (1401010009820)` and earlier	0.72

Additional resources

For information on additional libraries, see Supported Third-Party Libraries and Services.

​Installation

​Example

​API reference

​Methods

​Implementation details

​Supported versions

​Additional resources