世博会图像机械手不会从世博会图像选择器中获取uri。

Question

我正在使用博览会图像选择器来获取本地存储图像的图像uri。我想使用博览会图像机械手调整图像大小之前，将其发送到后端，但世博imageManipulator将不会从博览会图像选择器的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)时，我得到的是：

file:/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.com.facebook.react.bridge.ReadableNativeMap转换为java.lang.String

如果我先对imageUrl进行字符串化，那么我就可以通过这个错误，但是调整大小器会抛出一个错误，说它不能解码图像：

错误:无法获得"file:/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的解码位图:加载位图失败

仿真器错误图像 记录错误的图像

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>
  );
}