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

如何解决expo-image-manipulator 不会从 expo-image-picker 获取 uri

我正在使用 expo-image-picker 获取本地存储图像的图像 uri。我想在将图像发送到后端之前使用 expo-image-manipulator 调整图像大小，但 expo imageManipulator 不会从 expo 图像选择器中获取 uri。这些错误是在 android 模拟器上的 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-8067fc87fc87fc8778

现在我尝试将其输入到下面的图像调整器中（作为 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 进行字符串化，那么我就会克服这个错误，但是 resizer 会抛出一个错误，说它无法解码图像：

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

Image of the emulator error image of the logged error

解决方法

由于您没有提供所有相关代码，因此很难确切了解这里发生了什么。我怀疑您遇到的问题是对对象进行字符串化，而不是从中获取适当的值。以下是 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>
  );
}