React Native — Как преобразовать изображение в Base64 и наоборот в Android

#react-native #react-native-android

#react-native

Вопрос:

Я создал приложение, которое делает фотографии и загружает их в AWS s3. Как только я их запишу, мне нужно их хэшировать. Там я использовал метод хеширования Base64, и захваченные фотографии зашифровывались. Но я не могу открыть это, и я не уверен, сделал ли я это надлежащим образом или нет.

Перед загрузкой я хочу отменить их хэширование. То есть они должны храниться в виде хэшированного изображения в галерее. Но я хочу преобразовать их в исходное изображение перед загрузкой. Итак, я могу сохранить реальное изображение в облаке.

Мой код,

    import React, {Component} from 'react';
    import {Platform, StyleSheet,Alert, Text,TouchableOpacity, View,Picker,Animated,Easing,Image, NetInfo,
      Dimensions,Button,ScrollView } from 'react-native';
      import ImagePicker from 'react-native-image-picker';
    import RNFS from 'react-native-fs';

    class SecondScreen extends React.Component {

        takePic = () => {
           if(this.state.connection_Status==="Online"){
            this.getServerTime();
              try{
                  this.setState({capturedTime:this.state.serverTime.currentFileTime '_' time}, 
                    () => console.log(this.state.serverTime.currentFileTime)
                  ); 

              } catch (err) {
                  var date = new Date();
                  var time = date.getTime();
                  this.setState({capturedTime:time});
                  console.log("localtime")
                }
            }

            const options = {
              quality: 1.0,
              maxWidth: 75,
              maxHeight: 75,
              base64: true,
              skipProcessing: true
          }
            ImagePicker.launchCamera(options,(responce)=>{

                this.state.testImage.push({ uri: responce.uri });
                  const file ={
                    uri : responce.uri,
                    name :responce.fileName,
                    method: 'POST',
                    width : 50,
                    height : 50,
                    path : responce.path,
                    type :  responce.type,
                    notification: {
                        enabled: true
                      }
                  }

              this.setState(prevState => {
                // get the previous state values for the arrays
                let saveImages = prevState.saveImages;
                // add the values to the arrays like before
                saveImages.push(file);
                // return the new state
                return {
                 saveImages
                }
              });

              const base64 = RNFS.writeFile(responce.path, 'base64');
              return base64;

            })
        }

      _upload=()=>{
        if(this.state.connection_Status==="Online"){
          const config ={
              keyPrefix :aws_keyPrefix,
              bucket : aws_bucketName,
              region :aws_region,
              accessKey:aws_accessKey,
              secretKey :aws_secretKey,
              successActionStatus :201
            }
            //store captured images in an array
            this.state.saveImages.map((image) => {
                 RNS3.put(image,config)
                .then((responce) => {
                  console.log(image);
                });
            });

            if (this.state.saveImages amp;amp; this.state.saveImages.length) {
              Alert.alert("Successfully, uploaded");
              //reset the arrays
              this.setState({saveImages:''});
              this.setState({testImage:''});
            } else {
              Alert.alert('No images captured');
            }
          } else {
            Alert.alert('Upload failed. User is in offline');
          }
      } 

      render() {
          return (
              <View style={styles.Camera}>
                <TouchableOpacity onPress={this.takePic.bind(this)}>
                  <Text>Take Picture</Text>
                </TouchableOpacity>

                <View style={styles.Send}>
                   <TouchableOpacity onPress={() => this._upload()}>
                      <Text>Send</Text>
                   </TouchableOpacity>
              </View>
              );
            }
          }

    const styles = StyleSheet.create({
      Camera :{
        justifyContent: 'center',
        alignItems: 'center',
        marginTop : 20,
        backgroundColor : '#48a4ff',
        alignItems : 'center',
        padding : 1,
        borderWidth : 1,
        borderColor : '#48a4ff',
      },
      Send :{
        justifyContent: 'center',
        alignItems: 'center',
        marginTop : 20,
        backgroundColor : '#48a4ff',
        alignItems : 'center',
        padding : 3,
        borderWidth : 1,
        borderColor : '#48a4ff',
      }
    });
export default SecondScreen;
  

Этот код я использую для хэширования изображения,

 const base64 = RNFS.writeFile(responce.path, 'base64');
              return base64;
  

После хэширования свойства изображения будут такими, как показано ниже,

введите описание изображения здесь

Как преобразовать его в реальное изображение перед загрузкой?

Кто-нибудь может мне помочь, так как я пытаюсь изо дня в день. Я не создавал никакого документа как такового для реализации этой функциональности.

Комментарии:

1. Возможно ли это сделать?

Ответ №1:

Я сделал это, используя библиотеку react-native-fs. Хэширование изображений я выполняю на стороне клиента, то есть в react-native, а разглашение — на стороне сервера.(Я сохраняю изображения в Amezon s3, перед сбросом мы удаляем эти изображения с помощью python.)

Мой код хэширования изображения,

 takePic = () => {
       /* other sets of codes
         .
         .*/

         const base64 = RNFS.writeFile(responce.uri, responce.data);
         return base64;
   }