ionic2で画像をキャプチャしてから電話機にローカルに保存する

Question

私はCordova Plugin Cameraを使用してユーザーのプロフィール画像をキャプチャしています。私はこれをアプリに保存したい。ここで

はそれをキャプチャコードは次のとおりです。画像が撮影されたら

Camera.getPicture({ 
     quality : 75, 
     destinationType : Camera.DestinationType.DATA_URL, 
     sourceType : Camera.PictureSourceType.CAMERA, 
     allowEdit : true, 
     encodingType: Camera.EncodingType.JPEG, 
     targetWidth: 300, 
     targetHeight: 300, 
     saveToPhotoAlbum: false 
    }).then(imageData => { 
     this.base64Image = "data:image/jpeg;base64," + imageData; 

    }, error => { 
     console.log("ERROR -> " + JSON.stringify(error)); 
    }); 

、私はプロフィールページ上に表示できるように、それをローカルに保存したいです。どのように私はこれを行うことができますか？

Answer 1

cordova-plugin-fileを使用できます。 DATA_URLは非常にメモリ集約することと、アプリがクラッシュしたり、アウトを引き起こす可能性があるので、私はまた

destinationType: Camera.DestinationType.FILE_URI（アンドロイド）または

destinationType: Camera.DestinationType.NATIVE_URI（IOS）

ため

destinationType : Camera.DestinationType.DATA_URL,

オプションを変更しますのメモリエラー。可能であれば、FILE_URIまたはNATIVE_URIを使用してください。

したがって、デバイス上のイメージへのパスを取得することです。これで、その写真をあなたのアプリ用に作成したフォルダ（永久保存版 ）に移動し、そのパスを使用してプロフィールページに写真を表示することができます。私はこのコルドバプラグインは、それをファイルに使用は、イオン性ネイティブの一部ではなかったので、コードは少し醜いです...

Camera.getPicture(/*...theOptions*/).then(
(imagePath) => { 
    // Create a new file name by using the username or something like that 
    let aDate = new Date(), 
    aTime = aDate.getTime(), 
    userName = this.myCustomUserService.getUserName(), 
    newFileName = userName + aTime + ".jpg"; 

    // Returns a reference to the actual file located at imagePath 
    window.resolveLocalFileSystemURL(imagePath, 
    (file) => { 

     // Returns a reference to the file system 
     window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, 
     (fileSys) => { 

      // Gets a reference to your app directory, and if it doesn't exist it creates it 
      fileSys.root.getDirectory('yourAppFolderName', {create: true, exclusive: false}, 
      (directory) => { 

       // Moves the file to that directory, with its new name 
       file.moveTo(directory, newFileName, 
       // The file was succesfully moved and it returns a reference to it. We can use nativeURL to grab the 
       // path to the image on the device 
       (fileEntry) => { 
        this.myCustomUserService.SetProfilePhotoUrl(fileEntry.nativeURL); 
       }, 

       // Now we start handing all the errors that could happen 
       (error) => { 
        // The file was unable to be moved 
        // Show error to the user 
        // ... 
       }); 
      }, 

      (error) => { 
       // Could not get a reference to your app folder 
       // Show error to the user 
       // ... 
      }); 
     }, 

     (error) => { 
      // Could not get a reference to the file system 
      // Show error to the user 
      // ... 
     }); 
    }); 
}, 

(err) => { 
     // Could not take picture 
     // Show error to the user 
     // ... 
}); 

Answer 2

あなたはこれらのオプションを使用することができます。撮影し

Camera.getPicture({ 
    sourceType: 1, // camera 
    destinationType: 1, // file uri 
    correctOrientation: true, 
    saveToPhotoAlbum: true, 
    encodingType: 0, // jpeg 
}).then((imageUri) => { 
}); 

画像自動的に保存されます。次に、imageUriを使用して画像を表示します。ファイルの内容を読む場合はhttp://ionicframework.com/docs/v2/native/file/