манипулятор expo-image не принимает uri из средства выбора изображений expo

Я использую средство выбора expo-image-picker, чтобы получить uri изображения локально сохраненного изображения. Я хочу использовать манипулятор expo-image-манипулятора для изменения размера изображения перед его отправкой на бэкэнд, но expo imageManipulator не будет принимать uri из средства выбора изображений expo. Эти ошибки возникают при работе в expo на эмуляторе Android.

Вот базовый код, получающий 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-5fbc1f0pg8pg

Теперь я пытаюсь ввести это в средство изменения размера изображения ниже (как 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-40 -81af-5fbc1f0758d5.jpg: java.lang.Exception: Ошибка загрузки растрового изображения]

Изображение ошибки эмулятора изображение зарегистрированной ошибки


react-native android expo imagepicker image-manipulation
person Nick    schedule 02.04.2021    source источник
comment
file:/data/user/0/host.exp..... Это должно быть file:///data/user/0/host.exp..... В любом случае удалите file:/ из этой строки. И поймите, что обычно вы должны удалить file://, поскольку это протокол. Тогда вы получите /data/user/0/host.exp.... в качестве пути.   -  person blackapps    schedule 02.04.2021
comment
Спасибо @blackapps !!! Я просто попытался вручную ввести разные варианты строки пути, и file:///data/user/0/host.exp....... - это то, что в итоге сработало. Вот зарегистрированный результат: manipResults: Object { "height": 39, "uri": "file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540anonymous%252FThredFit-59f4d533-f203-4efb-bcb0-6a5786d44584/ImageManipulator/36e913d6-98b1-4899-a3d7-d3e5d3675641.jpg", "width": 50, }   -  person Nick    schedule 02.04.2021
comment
Интересно, всегда ли это будет иметь место с uri для expo-image-picker, и мне просто нужно структурировать и добавить '//' к uri перед отправкой в ​​expo-image-манипулятор, или это относится к android или эмулятору ......   -  person Nick    schedule 02.04.2021

Ответы (1)


arrow_upward
0
arrow_downward

Трудно понять, что здесь происходит, потому что вы не предоставили весь соответствующий код. Я подозреваю, что проблема, с которой вы столкнулись, связана с преобразованием объекта в строку, а не с получением от него соответствующего значения. Вот пример интеграции 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>
  );
}
person brentvatne    schedule 02.04.2021
comment
Спасибо @brentvatne. По сути, это то, чем я занимался сначала. Я передавал result.uri прямо в ImageManipulator.manipulateAsync (), как и вы, но манипулятор изображений находился в отдельном компоненте. Я попробую ваш код в компоненте, в котором есть средство выбора изображений, чтобы проверить, работает ли это. Отчитаюсь после ужина на день рождения дочери :) - person Nick; 03.04.2021
comment
@brentvtne, спасибо !!! Это сработало! Я сохранил манипулятор изображений в отдельном компоненте. Единственная разница заключалась в том, что раньше я устанавливал result.uri в переменную состояния и передавал это imageManipulator.manipulateAsync(uri,.. , а теперь я передаю весь результат и использую ваш: ImageManipulator.manipulateAsync(result.localUri || result.uri, ... - person Nick; 03.04.2021