реагировать родной камеры преобразовать изображение base64 в JPEG - PullRequest
Новая
       42

реагировать родной камеры преобразовать изображение base64 в JPEG

0 голосов
/ 28 марта 2020

Мне удалось использовать 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;
...