javascript - 显示从相机拍摄的图像

Question

正如您在下面看到的，我正在使用 [src] 属性。我想做的是预览从设备相机拍摄的图像。请参阅下面的其余 typescript 代码。

<img [src]="lastImage" style="width: 100%" [hidden]="lastImage === null">
<button ion-button icon-left (click)="presentActionSheet()">
    <ion-icon name="camera"></ion-icon>Select Image
</button>

这是.ts代码

lastImage: string = null;

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('ios') && sourceType === this.camera.PictureSourceType.PHOTOLIBRARY) {
            alert('IF');
            this.filePath.resolveNativePath(imagePath).then(filePath => {
                let correctPath = filePath.substr(0, filePath.lastIndexOf('/') + 1);
                let currentName = imagePath.substring(imagePath.lastIndexOf('/') + 1, imagePath.lastIndexOf('?'));

                // alert(correctPath);
                alert(correctPath + currentName);
                this.lastImage = correctPath + currentName;
                // this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
            });
        } else {
            alert('ELSE'); // This part runs
            var currentName = imagePath.substr(imagePath.lastIndexOf('/') + 1);
            var correctPath = imagePath.substr(0, imagePath.lastIndexOf('/') + 1);

            alert(cordova.file.dataDirectory + currentName); // This returns proper image path

            this.lastImage = cordova.file.dataDirectory + currentName;

            alert(this.lastImage); // this also has the image path.

            this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
        }
    }, (err) => {
        this.presentToast('Error while selecting image.');
    });
}

现在，当我选择图像 Use Camera 时，它会打开相机并拍照。但是不知何故，在我使用 [src]="lastImage" 的上面的 HTML 中，照片没有预览。我的代码有什么问题，它不显示来自相机的任何图像？

更新

我还使用了我发现的 normalizeURL here点赞关注!

import { normalizeURL } from 'ionic-angular';

this.lastImage = normalizeURL(cordova.file.dataDirectory + currentName);

这段代码发生的事情是它将 file:/// 部分替换为 http://localhost:8080 而我正在从本地没有任何服务器并希望在 img 标签上显示的相机。

Answer 1

他，我建议用base64给img标签设置image，看下一段代码:

Controller 属性

private base64Image: any = false;

在您的 Controller 构造函数中设置:“public domSanitizer: DomSanitizer”作为参数，这允许对 Angular 说图像是“安全的”。

Controller 方法

takePicture() {

const options: CameraOptions = {
  quality: 10,
  destinationType: this.camera.DestinationType.DATA_URL,
  encodingType: this.camera.EncodingType.JPEG,
  mediaType: this.camera.MediaType.PICTURE
}

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

}, (err) => {
  this.message("Error, your camera device not work");
});

在你的 View 文件中

<img *ngIf="base64Image != 'false'" [src]="domSanitizer.bypassSecurityTrustUrl(base64Image)">