从画廊上传Ionic 2 Firebase图像

时间:2017-07-20 06:52:25

标签: angular cordova firebase ionic2 firebase-storage

请参阅以下代码,以便从Ionic / Cordova相机插件中捕获图像。

有两个功能,一个用于捕获表单相机,另一个用于从库中上传图像。

capture() {
const cameraOptions: CameraOptions = {
  quality: 50,
  destinationType: this.camera.DestinationType.DATA_URL,
  encodingType: this.camera.EncodingType.JPEG,
  mediaType: this.camera.MediaType.PICTURE,
};

this.camera.getPicture(cameraOptions).then((imageData) => {
  // imageData is either a base64 encoded string or a file URI
  // If it's base64:
  this.captureDataUrl = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
  // Handle error
});
}

private openGallery (): void {
let cameraOptions = {
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
destinationType: this.camera.DestinationType.FILE_URI,      
quality: 100,
targetWidth: 1000,
targetHeight: 1000,
encodingType: this.camera.EncodingType.JPEG,      
correctOrientation: true
}

this.camera.getPicture(cameraOptions).then((file_uri) => {

this.captureDataUrl = 'data:image/jpeg;base64,' + file_uri;
},
err => console.log(err));   
}

目前,我可以将图像从相机上传到我的Firebase数据库。

但是,当尝试从图库上传图像时,我在Xcode中收到以下错误

[Generic]创建具有未知类型的图像格式是错误的 2017-07-20 16:14:24.528250 + 0930 CommunitiLink [3846:1372899]警告:清理不安全的URL值数据:image / jpeg; base64,file:/// var / mobile / Containers / Data / Application / A6029474-FAE7 -4FA7-9DF6-F6376D142D58 / TMP / cdv_photo_002.jpg

希望有人可以提供帮助!

1 个答案:

答案 0 :(得分:1)

我找到了一种将图像库从Ionic 2上传到firebase的方法 这是解决方案

capture() {
        const cameraOptions: CameraOptions = {
            sourceType: this.camera.PictureSourceType.CAMERA,
            quality: 50,
            destinationType: this.camera.DestinationType.DATA_URL,
            encodingType: this.camera.EncodingType.JPEG,
            mediaType: this.camera.MediaType.PICTURE,
        };

        this.camera.getPicture(cameraOptions).then((imageData) => {            
            this.captureDataUrl = imageData;
        }, (err) => {
            // Handle error
        });
    }

    private openGallery(): void {
        let cameraOptions = {
            sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
            destinationType: this.camera.DestinationType.DATA_URL, // Change FILE_URI to DATA_URL
            quality: 100,
            targetWidth: 1000,
            targetHeight: 1000,
            encodingType: this.camera.EncodingType.JPEG,
            correctOrientation: true
        }

        this.camera.getPicture(cameraOptions).then((file_uri) => {
            /* Remove 'data:image/jpeg;base64,' 
               FYI : You can use another variable to bind src attribute in <img> tag
               you have to prepend 'data:image/jpeg;base64,' to that variable
            */
            this.captureDataUrl = file_uri; 
        },
        err => console.log(err));
    }

    // To store image in firebase storage
    var imageStore = firebase.storage().ref('directoryPath').child('imageName' + '.jpg');
    imageStore.putString(this.captureDataUrl, 'base64', { contentType: 'image/jpg' }).then(function (snapshot) {
        // Do success callback
    });

我认为这会有所帮助...... 感谢