expo-image-manipulator 不会从 expo-image-picker 中获取 uri

Question

我正在使用 expo-image-picker 来获取本地存储图像的图像 uri。我想在将图像发送到后端之前使用 expo-image-manipulator 调整图像大小，但是 expo imageManipulator 不会从 expo 图像选择器中获取 uri。这些错误是在安卓模拟器上的 expo 中运行时发生的。

这是获取 uri 的基本代码：

import * as ImagePicker from "expo-image-picker";

const selectImage = async () => {
try {
  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    quality: 0.5,
  });
  if (!result.cancelled) onChangeImage(result.uri);
} catch (error) {
  console.log("Error reading an image", error);
}

};

我可以将此图像直接发送到后端并将其保存到我的 S3 中。当我 console.log(uri) 时，我得到的是：

文件：/data/user/0/host.exp.exponent/cache/ExperienceData/%2540anonymous%252FThredFit-59f4d533-f203-4efb-bcb0-6a5786d44584/ImagePicker/0ea74111-8677-4074-81af-5fbc1f0758d5.jpg

现在我尝试将其输入到下面的图像调整器中（作为 imageUri）：

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

const setSize = async (imageUri, width, height) => {
try {
  const manipResult = await ImageManipulator.manipulateAsync(
    imageUri,
    [{ resize: { width: width, height: height } }],
    { format: 'jpeg' }
);
  console.log(manipResult);
} catch (error) {
  console.log("Error manipulating image: ", error);
}

};

我在 android 模拟器上收到以下错误：

abi38_0_0.com.facebook.react.bridge.ReadableNativeMap 无法转换为 java.lang.String

如果我首先对 imageUrl 进行字符串化，那么我会克服这个错误，但调整大小会抛出一个错误，说它无法解码图像：

[错误：无法获得“文件：/data/user/0/host.exp.exponent/cache/ExperienceData/%2540anonymous%252FThredFit-59f4d533-f203-4efb-bcb0-6a5786d44584/ImagePicker/0ea74111 的解码位图-8677-4074-81af-5fbc1f0758d5.jpg": java.lang.Exception: 加载位图失败]

Image of the emulator error image of the logged error

Answer 1

很难确切地看到这里发生了什么，因为您没有提供所有相关代码。我怀疑您遇到的问题是对对象进行字符串化，而不是从中获取适当的值。以下是 ImagePicker 和 ImageManipulator 集成的示例：https://snack.expo.io/@brents/image-picker-and-manipulator

import React, { useState, useEffect } from 'react';
import { Button, Image, View, Platform } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import * as ImageManipulator from 'expo-image-manipulator';
import Constants from 'expo-constants';

export default function ImagePickerExample() {
  const [image, setImage] = useState(null);

  useEffect(() => {
    (async () => {
      if (Platform.OS !== 'web') {
        const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
        if (status !== 'granted') {
          alert('Sorry, we need camera roll permissions to make this work!');
        }
      }
    })();
  }, []);

  const pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });

    console.log(result);

    if (result.cancelled) {
      return;
    }

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

    setImage(manipResult.uri);
  };

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button title="Pick an image from camera roll" onPress={pickImage} />
      {image && <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
    </View>
  );
}