在React Native中将图片转换为base64

Question

我使用了 react-native-image-picker，现在我从相册中选择一张照片。为了将该图像发送到API，我必须先将其转换为base64，然后再转换为字节数组。我在 response.uri中有文件路径。我该怎么做呢？

当我使用 console.log(response) 后，我得到以下结果：

'Response = ', {
  fileSize: 6581432,
  longitude: -17.548928333333333,
  uri: 'file:///Users/shubhamb/Library/Developer/CoreSimulator/Devices/B58314DF-F0A9-48D2-B68A-984A02271B72/data/Containers/Data/Application/63143214-8A03-4AC8-A79C-42EC9B82E841/tmp/2AACBC57-0C07-4C98-985E-154668E6A384.jpg',
  fileName: 'IMG_0003.JPG',
  latitude: 65.682895,
  origURL: 'assets-library://asset/asset.JPG?id=9F983DBA-EC35-42B8-8773-B597CF782EDD&ext=JPG',
  type: 'image/jpeg',
  height: 2002,
  width: 3000,
  timestamp: '2012-08-08T18:52:11Z',
  isVertical: false,
}

- user11426267

---

请查看以下内容： https://dev59.com/wFsW5IYBdhLWcg3wfXX6 - sangmin

请参考以下链接：https://dev59.com/wFsW5IYBdhLWcg3wfXX6 - sangmin

Answer 1

由于您正在使用react-native-image-picker，它已经在其响应中返回了Base64值。

ImagePicker.showImagePicker(options, (response) => {
  const base64Value = response.data;
});

响应对象的文档

- rabbit87

---

是的，我做了那个，但当我尝试使用alert(base64value)打印时，它显示未定义。 - user11426267

const source = {uri: 'data:image/jpg;base64,' + response.data, isStatic: true} 这将返回一个对象，但只适用于jpg格式的图片。 - user11426267

你能告诉我我做错了什么吗？我还需要将那个base64转换成字节数组。 - user11426267

我不确定为什么会出现未定义的情况。你可以尝试使用console.log(response)来查看整个值是什么。至于字节数组，我实际上没有相关经验，但这可能会有所帮助：https://dev59.com/UG025IYBdhLWcg3wFxua - rabbit87

这很奇怪，你能检查一下在选项中是否将“noData”设置为true吗？这可能导致了问题。 - rabbit87

Answer 2

在更新我的应用程序时，我突然遇到了这个问题。我发现之前的react-native-image-picker提供的是response.data作为base64。但是现在在options对象中有一个includeBase64，所以你可以控制是否需要base64数据。所以我的代码变成了以下的形式：

captureTradeLicenseImage() {
    let options = {
        maxHeight: 250,
        maxWidth: 350,
        includeBase64: true //add this in the option to include base64 value in the response
    }
    ImagePicker.launchCamera(options, (response)  => {
        console.log('Response = ', response)
        if (response.didCancel) {
            console.log('User cancelled image picker')
        }
        else if (response.error) {
            console.log('ImagePicker Error: ', response.error)
        }
        else if (response.customButton) {
            console.log('User tapped custom button: ', response.customButton)
        }
        else if (response.fileSize > 5242880) {
            Alert.alert(
                "Nilamhut Say\'s",
                "Oops! the photos are too big. Max photo size is 4MB per photo. Please reduce the resolution or file size and retry",
                [
                    { text: "OK", onPress: () => console.log('ok Pressed') }
                ],
                { cancelable: false }
            )
        }
        else {
            this.setState({tradeLicenseImageData: response.base64}) //access like this
        }
    })
}

- masud_moni

Answer 3

就是这么简单：

import { CameraOptions, ImagePickerResponse, launchCamera } from 'react-native-image-picker';

Wrap in your component: 

const [b64, setB64] = useState<string>("");

const manageImage = async (response: ImagePickerResponse) => {
    if (response.didCancel) {
      return;
    } else if (response.assets) {
        if (response.assets?.length > 0) {
          setB64(response.assets[0].base64 ? response.assets[0].base64 : "");
        }
    }
  }

launchCamera(options, (response) => {
  manageImage(response);
});

- lmasneri

Answer 4

独立的Expo FileSystem包使此过程变得简单：

const base64 = await FileSystem.readAsStringAsync(photo.uri, { encoding: 'base64' });

作为2019-09-27，该软件包处理file://和content:// uri。最初的回答请参考：

• https://docs.expo.io/versions/latest/sdk/filesystem/
• https://github.com/expo/expo/tree/master/packages/expo-file-system

- Ulad Kasach

Answer 5

如果我能帮助其他人找到如何从图像中获取base64数据，虽然来晚了但也算有所作为： 在options对象中，您需要将base64选项设置为true，代码如下：

const options = {
   title: 'Choose an Image',
   base64: true
};

ImagePicker.launchImageLibrary(options, response => {
    console.log(response.data);
});

- Alex Omonte Carreño

Answer 6

包括

includeBase64: true

在选项中，确实为我返回了Base64字符串。

- Muhammad Umar