首页 > 解决方案 > 如何在本机反应中散列和取消散列图像

问题描述

我创建了一个捕获图像并上传到 AWS s3 的应用程序。目前,这些都存放在画廊中。我想在捕获这些图像后对这些图像进行散列/加密,然后在上传之前,我想对这些图像进行散列/解密。我如何在本机反应中实现这些?我用谷歌搜索了它,但我没有找到任何方法。

我的代码是,

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 DeviceInfo from 'react-native-device-info';
import { RNS3 } from 'react-native-aws3';
import Form from './Form';
const SIZE = 40;
const { width } = Dimensions.get('window');

class SecondScreen extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          SelectedClass : '',
          SelectedSection : '',
          SelectedSubject : '',
          serverTime : null,
          saveImages : [],
          testImage : [],
          isConnected :false,
          schoolId : 10,
          userId :9,
          connection_Status : "",
          logout:false
        }
      }

       getServerTime() {
        fetch('http://worldclockapi.com/api/json/utc/now')
          .then((response) => response.json())
          .then((responseJson) => {
              if (responseJson) {
                  this.setState({
                      serverTime: responseJson
                  })
              }
              console.log(responseJson);
              console.log(responseJson);
          })
          .catch((error) => {
              console.error(error);
          });
      }

      componentDidMount = () => {
           NetInfo.isConnected.addEventListener(
              'connectionChange',
              this._handleConnectivityChange

          );
          NetInfo.isConnected.fetch().done((isConnected) => {

            if(isConnected == true)
            {
              this.setState({connection_Status : "Online"})
            }
            else
            {
              this.setState({connection_Status : "Offline"})
            }
        });
      }
     componentWillUnmount = () => {
         NetInfo.isConnected.removeEventListener(
          'connectionChange',
          this._handleConnectivityChange
      );
     }

     _handleConnectivityChange = (isConnected) => {

      if(isConnected == true)
        {
          this.setState({connection_Status : 1})
        }
        else
        {
          this.setState({connection_Status : 0})
        }
    };

      //change state of class, sesssion and subject
      updateClass = (SelectedClass) => {
      this.setState({ SelectedClass: SelectedClass })
     }
      updateSession = (SelectedSection) => {
      this.setState({ SelectedSection: SelectedSection })
     }
      updateSubject = (SelectedSubject) => {
      this.setState({ SelectedSubject: SelectedSubject })
     }

    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
            }
          });
        })
    }

  _upload=()=>{
    if(this.state.connection_Status==="Online"){
      const config ={
          keyPrefix :'uploads/',
          bucket : '***********',
          region :'********',
          accessKey:'************',
          secretKey :'*************',
          successActionStatus :201
        }

        this.state.saveImages.map((image) => {
             RNS3.put(image,config)
            .then((responce) => {
              console.log(image);
            });
        });
        if (this.state.saveImages && this.state.saveImages.length) {
          Alert.alert('Successfully, saved');
          this.setState({saveImages:''});
          this.setState({testImage:''});
        } else {
          Alert.alert('No images captured');
        }
      } else {
        Alert.alert('Upload failed. User is in offline');
      }
  } 

  signout = () => {
       this.setState({
         logout: true
       })
   }
  render() {
      return (
        <View>
             {this.state.error ? <Text>Error: {this.state.error}</Text> : null}
             <View style={styles.Camera}>
                <TouchableOpacity onPress={this.takePic.bind(this)}>
                  <Text>Take Picture</Text>
                </TouchableOpacity>
              </View>
              <View style={styles.Send}>
                  <TouchableOpacity onPress={() => this._upload()}>
                    <Text>Send</Text>
                  </TouchableOpacity>
                </View>
             </View >
            }</View>
          );
        }
      }

const styles = StyleSheet.create({
});

export default SecondScreen;

标签: react-nativereact-native-image-picker

解决方案


推荐阅读