Erfassen von Bildern in ionic2 und dann lokal auf Telefon speichern

Question

Ich benutze eine Cordova Plugin Camera, um Benutzer Profilbild zu erfassen. Ich möchte dies in der App speichern. Hier

ist der Code, der es erfasst:

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

Sobald das Bild aufgenommen wird, möchte ich es lokal speichern, so dass ich es auf der Profilseite anzeigen kann. Irgendeine Ahnung, wie ich das machen kann?

Answer 1

Sie könnten die cordova-plugin-file verwenden. Ich würde ändern auch die Option

destinationType : Camera.DestinationType.DATA_URL,

für

destinationType: Camera.DestinationType.FILE_URI (Android) oder

destinationType: Camera.DestinationType.NATIVE_URI (ios)

Da DATA_URL sehr speicherintensiv sein kann und App-Abstürzen führen oder aus von Speicherfehlern. Sie sollten FILE_URI oder NATIVE_URI verwenden, wenn möglich.

Die Idee ist also, einen Pfad zu dem Bild auf dem Gerät zu greifen. Damit können wir dieses Foto in einen Ordner verschieben, der für Ihre App erstellt wurde (der sich im permanenten Speicher befindet). Anschließend können Sie diesen Pfad verwenden, um das Foto auf der Profilseite anzuzeigen. Als ich dieses Cordova Plugin verwendet Datei nicht Teil der ionischen Mutter war, so dass der Code ein wenig hässlich ...

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

Sie diese Optionen verwenden können:

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

aufgenommenes Bild wird automatisch gespeichert. Verwenden Sie dann imageUri, um das Bild anzuzeigen. Wenn Sie den Inhalt der Datei lesen möchten, finden Sie unter http://ionicframework.com/docs/v2/native/file/