是否可以捕获图像并将其裁剪,然后将其上传到离子2中的firebase?

时间:2017-08-02 14:18:56

标签: camera ionic2 crop angularfire2

我搜索了很多关于通过手机摄像头拍摄图像的方法,然后我可以裁剪它,最后我想在firebase上上传图像...

离子2可能吗?或者没办法完成这三个步骤?

1 个答案:

答案 0 :(得分:0)

您可以使用手机摄像头拍摄图像并裁剪并上传到服务器。有两种选择如下。

  1. https://github.com/jeduan/cordova-plugin-crop
  2. https://ampersandacademy.com/tutorials/ionic-framework-version-2/upload-an-image-to-the-php-server-using-ionic-2-transfer-and-camera-plugin
  3. 选项1:

    import { Injectable } from '@angular/core';
    import { Platform } from 'ionic-angular';
    import { Camera, Crop } from 'ionic-native';
    
    @Injectable()
    export class CameraService {
    
      public options: any = {
            allowEdit: true,
            sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM,
            mediaType: Camera.MediaType.ALLMEDIA,
            destinationType: Camera.DestinationType.FILE_URI
      }
    
      constructor(public platform: Platform) {}
    
      // Return a promise to catch errors while loading image
      getMedia(): Promise<any> {
        // Get Image from ionic-native's built in camera plugin
        return Camera.getPicture(this.options)
          .then((fileUri) => {
            // Crop Image, on android this returns something like, '/storage/emulated/0/Android/...'
            // Only giving an android example as ionic-native camera has built in cropping ability
            if (this.platform.is('ios')) {
              return fileUri
            } else if (this.platform.is('android')) {
              // Modify fileUri format, may not always be necessary
              fileUri = 'file://' + fileUri;
    
              /* Using cordova-plugin-crop starts here */
              return Crop.crop(fileUri, { quality: 100 });
            }
          })
          .then((path) => {
            // path looks like 'file:///storage/emulated/0/Android/data/com.foo.bar/cache/1477008080626-cropped.jpg?1477008106566'
            console.log('Cropped Image Path!: ' + path);
            return path;
          })
      }
    
    }