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

Question

我正在使用 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) 时，这是我得到的：

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_0.com.facebook.react.bridge.ReadableNativeMap cannot be cast to java.lang.String

如果我先将 imageUrl 字符串化，那么我就可以通过这个错误，但是缩放器会抛出一个错误，说它无法解码图像：

[Error: Could not get decoded bitmap of "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: Loading bitmap failed]

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

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

expo-image-manipulator won't take uri from expo-image-picker

android

image-manipulation

react-native

expo

imagepicker