在本机反应中将图像转换为base64答案

【问题标题】：Convert Image to base64 in react native在本机反应中将图像转换为base64
【发布时间】：2019-12-04 07:56:04
【问题描述】：

我使用了 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,
}

【问题讨论】：

看到这个stackoverflow.com/questions/34908009/…
看到这个stackoverflow.com/questions/34908009/…

标签： react-native react-native-image-picker

【解决方案1】：

由于您使用的是 react-native-image-picker，它已经在响应中返回 Base64 值

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

Documentation for the response

【讨论】：

是的，我这样做了，但是当我尝试使用 alert(base64value) 打印时，它显示未定义。
const source = {uri: 'data:image/jpg;base64,' + response.data, isStatic: true} 这会返回对象，但它只适用于 jpg。
你能告诉我我做错了什么吗？我还必须将该 base64 转换为字节数组。
我不知道为什么你会得到未定义。你可以试试 console.log(response) 看看整个值是多少？至于字节数组，我实际上并没有这方面的经验，但这可能会有所帮助：stackoverflow.com/questions/6226189/…
这很奇怪，你能检查一下你是否在选项中将“noData”设置为true吗？这可能会导致问题

【解决方案2】：

我在更新我的应用程序时突然遇到了这个问题。我发现以前的 react-native-image-picker 曾经提供 base64 作为 response.data。但是现在在 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
        }
    })
}

【讨论】：

【解决方案3】：

独立的 expo FileSystem 包让这一切变得简单：

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

截至 2019 年 9 月 27 日，此软件包同时处理 file:// 和 content:// uri 的

【讨论】：

【解决方案4】：

我来晚了，但如果我可以帮助其他正在寻找如何从图像中获取 base64 数据的人：在 options 对象中，您必须将 base64 选项设置为 true，如下所示：

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

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

【讨论】：