【问题标题】:How to save/store signature image in app or phone internal storage. in react native如何在应用程序或手机内部存储中保存/存储签名图像。在本机反应
【发布时间】:2021-06-21 21:24:01
【问题描述】:

我是原生反应的新手。我正在尝试将签名存储在我的移动内部存储中。或在应用程序本身。但我不知道如何将此签名图像存储在手机内部存储或应用程序存储中。请帮忙 。这是代码

base64:null,

_onSaveEvent = (result) => {

  this.setState({base64: result.pathName})
  console.log(this.state.base64)


                            <SignatureCapture
                              style={styles.signature}
                              ref="sign"
                              onSaveEvent={this._onSaveEvent}
                              onDragEvent={this._onDragEvent}
                              showNativeButtons={false}
                              showTitleLabel={false}
                              viewMode={'portrait'}
                            />
}

result.pathName 返回此路径 =

/storage/emulated/0/saved_signature/signature.png

但知道文件夹调用者已保存_签名。那该怎么办。

【问题讨论】:

    标签: javascript image react-native path digital-signature


    【解决方案1】:

        npm install --save rn-fetch-blob
    
    For android only AndroidManifest.xml
    <!-- Required -->
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
    <!-- Include this only if you are planning to use the camera roll -->
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    
    <!-- Include this only if you are planning to use the microphone for video recording -->
    <uses-permission android:name="android.permission.RECORD_AUDIO"/>
    
    
    <!-- Required -->
    <application  android:requestLegacyExternalStorage="true" ... />
    
    // check for permission
    const checkAndroidPermission = async () => {
        if (Platform.OS === 'ios') {
          save();
        } else {
          try {
            const granted = await PermissionsAndroid.request(
              PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
            );
            if (granted === PermissionsAndroid.RESULTS.GRANTED) {
              // Once user grant the permission start downloading
    
              save();
            } else {
              if (Platform.OS === 'android') {
                ToastAndroid.show('Storage Permission denied.', ToastAndroid.SHORT);
              } else {
                AlertIOS.alert('Storage Permission denied.');
              }
            }
          } catch (err) {
            // To handle permission related exception
            console.warn('tryerr', err);
          }
        }
      };
      
       const save= async () => {
          const paths = `${
            RNFetchBlob.fs.dirs.DCIMDir
          }/${new Date().getTime()}.jpg`; // where u need to put that 
          try {
            RNFetchBlob.fs
              .writeFile(paths, data.base64, 'base64')//data.base64 is your photo with convert base64
              .then((value) => {
                  RNFetchBlob.fs
                    .scanFile([{path: paths}]) //after save to notify gallry for that
                    .then(() => {
                      console.log('scan file success');
                    })
                    .catch((err) => {
                      console.log('scan file error');
                    });
              })
              .catch((e) => console.log(e.message));
          } catch (error) {
            console.log('fileerror', error.message);
          }
        
    }

    这对你有帮助

    【讨论】:

    • 最后他们是 = ';'预期的.ts(1005)
    • 如果你有空请编辑我的代码我不知道我应该把我的结果放在哪里
    • 把你的结果日志给我,我可以编辑我的答案
    • 我的 rsult.pathName = /storage/emulated/0/saved_signature/signature.png, result.encoded = {base64 png data}, result = [object , bject]
    • 嘿。我的图像现在显示在内部存储中,谢谢,但图像未发送到服务器未上传到服务器。请帮忙
    【解决方案2】:

    使用它来将您的照片存储在内部存储中rn-fatch-blob 如果您不明白这一点,请告诉我,我还将共享一个代码,以使用自定义文件夹路径将文件存储在您的照片中

    【讨论】:

    • 是的,请告诉我该怎么做,我真的不知道如何使用这个 rn-fetch-blob
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-02-14
    • 1970-01-01
    • 2016-12-25
    相关资源
    最近更新 更多