Question

如下所示，我使用[src]属性。我要做的是预览从设备的相机拍摄的图像。请参阅下面的其他打字稿代码。

<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标签上显示该照片。< / p>

Answer 1

他，我建议使用base64将图像设置为img标签，检查下一个代码：

控制器属性

private base64Image: any = false;

在你的控制器构造函数集中：＆＃34; public domSanitizer：DomSanitizer＆＃34;作为参数，这允许说角度图像是＆＃34;安全＆＃34;。

控制器方法

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

}

在您的视图文件中

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

Answer 2

import { normalizeURL } from 'ionic-angular';

<img *ngIf="base64Image" src="{{base64Image}}"/> 
   openCamera(pictureSourceType: any) {
let options: CameraOptions = {
  quality: 95,
  destinationType: this.camera.DestinationType.FILE_URI,
  sourceType: pictureSourceType,
  encodingType: this.camera.EncodingType.PNG,
  targetWidth: 400,
  targetHeight: 400,
  saveToPhotoAlbum: true,
  correctOrientation: true
};
this.camera.getPicture(options).then(imageData => {
    if (this.platform.is('ios'))
    this.base64Image = normalizeURL(imageData);
     // IF problem only occur in ios and normalizeURL 
     //not work for you then you can also use 
     //this.base64Image= imageData.replace(/^file:\/\//, '');
  else
    this.base64Image= "data:image/jpeg;base64," + imageData;
}, error => {
  console.log('ERROR -> ' + JSON.stringify(error));
});
}

Answer 3

在我的情况下，当我在我的localhost中将src设置为图像标记时，它会出现一些不安全的安全问题 ERR_UNKNOWN_URL_SCHEME 。

所以我使用DomSanitizer来绕过安全，如下所示。

constructor(private senitizer: DomSanitizer) {}

this.imageUrl = <string>this.senitizer.bypassSecurityTrustUrl(this.imageUrl);

请检查您的控制台以及是否存在同样的问题，而不是＆＃39; normalizeURL＆＃39;使用上面的代码来绕过localhost的安全性。

或者如果您在某个安全域(https)上部署代码，则不需要安全绕过。

Answer 4

可能它将LOCATION传递给src（而不是URL）。你可以：

1）将图片文件（即从C:/path/file.jpg）移动到LOCALHOST的www根文件夹中，并在http://localhost/file.jpg属性中使用网址src。

或

2）将图像转换/追加到<canvas>元素（但要学习一些基础知识）

或

3）正如已经建议的那样，将图像转换为BASE64字符串（不是很好，但有效）并将数据附加到src。

Answer 5

这段代码可以帮助你

应用组件

export class AppComponent implements OnInit{
  video: any;
  canvas: any;

  ngOnInit() {
    this.startup();
  }

  startup(): void {
    this.video = document.getElementById('video');
    this.canvas = document.getElementById('canvas');

    const nav = <any>navigator;
    nav.getUserMedia = nav.getUserMedia || nav.mozGetUserMedia || nav.webkitGetUserMedia;

    const self = this;
    navigator.mediaDevices.getUserMedia({video: true, audio: false})
      .then(function (stream) {
        self.video.srcObject = stream;
        self.video.play();
      });
  }

  onBtnClicked(event: Event): void {
    this.takePicture();
    event.preventDefault();
  }

  takePicture() {
    const context = this.canvas.getContext('2d');
      context.drawImage(this.video, 0, 0, 100, 100);
  }
}

组件的模板是：

<div class="camera">
  <video id="video" #video
         width="width"
         height="height"
         (canplay)="onCanPlay($event)">
    Video stream not available.
  </video>
</div>

<canvas id="canvas" #canvas
        width="width"
        height="height">
</canvas>
<button (click)="takePicture()">Take Picture</button>

详细检查this

Answer 6

查看模板：

LowPerformance = sales[**Products-1**][0];   //first element of last column

for (int row = 0; row< SalesPerson - 1; row++)
{
    if (LowPerformance > sales[**Products-1**][row])  
    {
        LowPerformance = sales[**Products-1**][row];  //lowest element of "row"th column

        LowPerformanceIndex = row;
    }
}

打字稿：

<img style="margin:5px; width: 100%" *ngIf="imageURL" src={{this.imageURL}} #myImage (click)="presentImage(myImage)" imageViewer/>

<button ion-button icon-left (click)="presentActionSheet()">
    <ion-icon name="camera"></ion-icon>Select Image
</button>

然后在提供商中添加“相机”：

import { Camera,CameraOptions, CameraPopoverOptions } from '@ionic-native/camera';
import { ImageViewerController } from 'ionic-img-viewer';

然后初始化给定的对象：

@Component({
//.....
providers: [Camera],
//....
})

然后

_imageViewerCtrl: ImageViewerController;
imageURL;
camera: Camera;

显示从相机拍摄的图像

6 个答案: