react-native-camera 将图像 base64 转换为 jpeg

Posted 2023-03-11

【中文标题】react-native-camera 将图像 base64 转换为 jpeg

【英文标题】：react-native-camera convert Image base64 to jpeg

【发布时间】：2020-03-28 01:17:02

【问题描述】：

我已经设法使用react-native-camera 拍摄图像，然后将其显示在<Image> 元素中，然后将图像的 base64 字符串发送回我的后端，但是，我可以图像在我的后端无法显示，因为它在 base64 中，图像在<Image> 元素中正确显示，src 属性设置为data:image/jpeg;base64,BASE64_HERE 格式。

你能指导我完成这项工作吗？

这是我的代码

'use strict';

import React,  PureComponent  from 'react';
import 
  AppRegistry,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  Image,
 from 'react-native';
import RNCamera from 'react-native-camera';
import RNFS from 'react-native-fs';

class App extends PureComponent 

    state = 
        img: false,
        b64: null,
    

  render() 
    return (

      <View style=styles.container>

        <RNCamera
          ref=ref => 
            this.camera = ref;
          
          style=styles.preview
          type=RNCamera.Constants.Type.front
          flashMode=RNCamera.Constants.FlashMode.off
          androidCameraPermissionOptions=
            title: 'Permission to use camera',
            message: 'We need your permission to use your camera',
            buttonPositive: 'Ok',
            buttonNegative: 'Cancel',
          
          androidRecordAudioPermissionOptions=null
          onGoogleVisionBarcodesDetected=null
        />

        <View style=flex: 0, flexDirection: 'row', justifyContent: 'center'>
          <TouchableOpacity
            onPress=this.takePicture.bind(this)
            style=styles.capture>
            <Text style=fontSize: 14> SNAP </Text>
          </TouchableOpacity>

        </View>

        this.state.img ? (
                <Image
                    source=
                        isStatic: true,
                        uri: this.state.b64,
                    
                    style=height: 100, width:100
        /> ) : null 

      </View>
    );
  

    takePicture = async () => 
        if (this.camera) 
            const options = quality: 0.5, base64: true;
            const data = await this.camera.takePictureAsync(options);

            var request = new XMLHttpRequest();

            request.onreadystatechange = (e) => 
                if (request.readyState !== 4) 
                    return;
                

                if (request.status === 200) 
                    alert('success');
                 else 
                    alert('error' + JSON.stringify(e));
                
            ;



            request.open('POST', 'http://myurl/get_img.php');
            request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");


            var filepath = data.uri.split('//')[1];
            var imageUriBase64 = await RNFS.readFile(filepath, 'base64');


            this.setState(b64: 'data:image/jpeg;base64,' + imageUriBase64, img: true);

            request.send('data=' + imageUriBase64);



        

    



const styles = StyleSheet.create(
  container: 
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'black',
  ,
  preview: 
    justifyContent: 'flex-end',
    alignItems: 'center',
    width: 200,
    height: 200,
  ,
  capture: 
    flex: 0,
    backgroundColor: '#fff',
    borderRadius: 5,
    padding: 15,
    paddingHorizontal: 20,
    alignSelf: 'center',
    margin: 20,
  ,
);


export default App;

【参考方案1】：

如果从后端获取图像时无法显示图像（此处未提供代码 sn-p），则可能是压缩格式，或者您可能未添加前缀 'data:image/jpeg;base64,'

【参考方案2】：

这可能是因为您在 base64 选项设置为 true 时尝试访问 data.uri 属性。你能检查 data.uri 的值吗？

当base64为真时，data.uri可能是undefined，导致RNFS.readFile失败。