expo-image-manipulator

@amazon-devices/expo-image-manipulatorは、ローカルファイルシステムに保存されている画像を変更するためのAPIを提供します。

インストール

package.jsonファイルにJavaScriptライブラリの依存関係を追加します。

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

npm installコマンドを使用して、依存関係を再インストールします。

例

以下の例は、画像に対して単一の操作を実行する方法を示しています。

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/kepler.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="操作" 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',
  },
});

以下の例は、画像に対して複数の操作を実行する方法を示しています。

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/kepler.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="操作" 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',
  },
});

次の例は、カスタム保存オプションを指定する方法を示しています。

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/kepler.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="操作" 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リファレンス

このライブラリの情報、APIリファレンス、その他の詳細については、Expo公式ドキュメントのexpo-image-manipulatorのページ（英語のみ）を参照してください。

メソッド

メソッド	説明
`manipulateAsync`	URIを通じて提供される画像を操作します。回転、反転（ミラーリング）、サイズ変更、トリミングを実行できます。呼び出しごとに新しいファイルが作成されます。1回の呼び出しで、画像に対して実行する複数の操作を指定できます。ソースファイルを上書きしても、画像はキャッシュされているため、表示される結果には反映されません。

既知の問題と制限事項

saveOptions.compressを使用すると、圧縮はKeplerでは機能しません。画像は常に最高画質で保存されます（値 1.0を指定した場合と同じ動作になります）。

サポートされているバージョン

パッケージのバージョン	ベース	@amazon-devices/react-native-keplerバージョン
2.0.x	11.6.0	2.0.x

Vegaライブラリとサービス

インストール

例

APIリファレンス

メソッド

既知の問題と制限事項

サポートされているバージョン

関連トピック

​インストール

​例

​APIリファレンス

​メソッド

​既知の問題と制限事項

​サポートされているバージョン

​関連トピック

インストール

例

APIリファレンス

メソッド

既知の問題と制限事項

サポートされているバージョン

関連トピック