Question

我想用两种方法上传图片一个使用画廊＆amp;另一个是相机

但是选择或捕获的问题未显示在页面中

**这是我的代码**

1） profile.html：

<img class="profile-picture" src="{{baseUrl + 'service/renderImage/' + 
         profId}}" (click)="changePicture()">
<h6 secondary>{{ 'TAP_ON_IMAGE' | translate }}</h6>

2） profile.ts：

import { Component } from '@angular/core';
import { PhotoViewer, ActionSheet, Camera, Transfer, Base64ToGallery } from 'ionic-native';
import { NavController, Platform, NavParams, AlertController } from 'ionic-angular';
import { LogDetails, ProfileDetails, serviceUrl } from '../../services/root-scope';
import { Http } from '@angular/http';
import { HomePage } from '../home/home';
import { TranslateService } from '@ngx-translate/core';

@Component({
selector: 'page-profile',
templateUrl: 'profile.html'
})
export class ProfilePage {
base64Image: string;
public profId: any;
public baseUrl: any;
public data: any;
public translate: any;
constructor(public navCtrl: NavController, http: Http, public navParams: NavParams, public alertCtrl: AlertController, translate: TranslateService) 
{
this.profId = ProfileDetails.profileId;
this.baseUrl = serviceUrl.baseUrl;
this.translate = translate;
this.data = {};
}
//this is my function
 changePicture() {
    console.log("changePicture called");
    let buttonLabels = [this.translate.get("VIEW_IMAGE").value, this.translate.get("CHANGE_IMAGE").value];
    ActionSheet.show({
        'title': this.translate.get("WHAT_DO_YOU_WANT_WITH_THIS_IMAGE").value,
        'buttonLabels': buttonLabels,
        'addCancelButtonWithLabel': this.translate.get("CANCEL").value,
        'addDestructiveButtonWithLabel': this.translate.get("DELETE").value
    }).then((buttonIndex: number) => {
        //alert('Button pressed: ' + buttonIndex);
        if (buttonIndex == 2) {
            try {
                /*Base64ToGallery.base64ToGallery(this.baseUrl + 'service/renderImage/' + this.profId, 'img_').then(
                    res => {
                        console.log('Saved image to gallery ', res);
                        PhotoViewer.show(res, this.name, { share: true })
                    },
                    err => {
                        console.log('Error saving image to gallery ', err);
                    }
                );*/
                PhotoViewer.show(this.baseUrl + 'service/renderImage/' + this.profId, this.name, { share: false })
            }
            catch (err) {
                console.log("Error in rendering image : "+err.message);
            }
        }
        else if(buttonIndex == 3) {
            //alert("buttonIndex : " + buttonIndex);
            let alert = this.alertCtrl.create();
            alert.setTitle(this.translate.get("CHOOSE_PHOTO_TYPE").value);

            alert.addInput({
                type: 'radio',
                label: this.translate.get("CAMERA").value,
                value: '1',
                checked: true
            });

            alert.addInput({
                type: 'radio',
                label: this.translate.get("GALLERY").value,
                value: '2',
                checked: false
            });

            alert.addButton(this.translate.get("CANCEL").value);
            alert.addButton({
                text: this.okBtn,
                handler: data => {
                    console.log("received data : ", data);
                    var options;
                    if (data == '1') {
                        options = {
                            allowEdit: true,
                            correctOrientation: true,
                            saveToPhotoAlbum: true
                        }
                    }
                    else if (data == '2') {
                        options = {
                            sourceType: 2,
                            allowEdit: true,
                            correctOrientation: true,
                            saveToPhotoAlbum: true
                        }
                    }
                    console.log("options : ", options);

                      Camera.getPicture(options)
                      .then((imageData)=>{
                        this.base64Image = "data:image/jpeg;base64," + imageData;

                        let cameraImageSelector = document.getElementById('camera-image');
                        cameraImageSelector.setAttribute('src', this.base64Image);

                      })
                      .catch(err=>{
                        console.log(err);
                      })
                   }
            });
            alert.present();
        }
    });
}

我想使用两种方法上传图片一个使用画廊＆amp;另一个是相机。但是选择或捕获的问题未显示在页面中

先谢谢

Answer 1

试试这个：

<强> html的

<ion-header>
  <ion-navbar color="primary">
    <ion-title>
      Home
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <img src="{{pathForImage(lastImage)}}" style="width: 100%" [hidden]="lastImage === null">
  <h3 [hidden]="lastImage !== null">Please Select Image!</h3>
</ion-content>

<ion-footer>
  <ion-toolbar color="primary">
    <ion-buttons>
      <button ion-button icon-left (click)="presentActionSheet()">
        <ion-icon name="camera"></ion-icon>Select Image
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>

<强> .TS

import { Component } from '@angular/core';
import { NavController, ActionSheetController, ToastController, Platform, LoadingController, Loading } from 'ionic-angular';

import { File } from '@ionic-native/file';
import { Transfer, TransferObject } from '@ionic-native/transfer';
import { FilePath } from '@ionic-native/file-path';
import { Camera } from '@ionic-native/camera';

declare var cordova: any;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  lastImage: string = null;
  loading: Loading;

  constructor(public navCtrl: NavController, private camera: Camera, private transfer: Transfer, private file: File, private filePath: FilePath, public actionSheetCtrl: ActionSheetController, public toastCtrl: ToastController, public platform: Platform, public loadingCtrl: LoadingController) { }

  public presentActionSheet() {
    let actionSheet = this.actionSheetCtrl.create({
      title: 'Select Image Source',
      buttons: [
        {
          text: 'Load from Library',
          handler: () => {
            this.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY);
          }
        },
        {
          text: 'Use Camera',
          handler: () => {
            this.takePicture(this.camera.PictureSourceType.CAMERA);
          }
        },
        {
          text: 'Cancel',
          role: 'cancel'
        }
      ]
    });
    actionSheet.present();
  }

  public takePicture(sourceType) {
  // Create options for the Camera Dialog
  var options = {
    quality: 100,
    sourceType: sourceType,
    saveToPhotoAlbum: false,
    correctOrientation: true
  };

  // Get the data of an image
  this.camera.getPicture(options).then((imagePath) => {
    // Special handling for Android library
    if (this.platform.is('android') && sourceType === this.camera.PictureSourceType.PHOTOLIBRARY) {
      this.filePath.resolveNativePath(imagePath)
        .then(filePath => {
          let correctPath = filePath.substr(0, filePath.lastIndexOf('/') + 1);
          let currentName = imagePath.substring(imagePath.lastIndexOf('/') + 1, imagePath.lastIndexOf('?'));
          this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
        });
    } else {
      var currentName = imagePath.substr(imagePath.lastIndexOf('/') + 1);
      var correctPath = imagePath.substr(0, imagePath.lastIndexOf('/') + 1);
      this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
    }
  }, (err) => {
    this.presentToast('Error while selecting image.');
  });
}

// Create a new name for the image
private createFileName() {
  var d = new Date(),
  n = d.getTime(),
  newFileName =  n + ".jpg";
  return newFileName;
}

// Copy the image to a local folder
private copyFileToLocalDir(namePath, currentName, newFileName) {
  this.file.copyFile(namePath, currentName, cordova.file.dataDirectory, newFileName).then(success => {
    this.lastImage = newFileName;
  }, error => {
    this.presentToast('Error while storing file.');
  });
}

private presentToast(text) {
  let toast = this.toastCtrl.create({
    message: text,
    duration: 3000,
    position: 'top'
  });
  toast.present();
}

// Always get the accurate path to your apps folder
public pathForImage(img) {
  if (img === null) {
    return '';
  } else {
    return cordova.file.dataDirectory + img;
  }
}
}

如何在离子2

1 个答案: