Question

嗨，我想预览捕获的图像。我无法使用fileuri获取图像托架的预览，没有任何建议……在我的代码下方

 capturePicture(){
const option: CameraOptions = {
  quality: 50,
  destinationType: this.camera.DestinationType.FILE_URI,
  encodingType: this.camera.EncodingType.JPEG,
  mediaType: this.camera.MediaType.PICTURE,
}
this.camera.getPicture(option).then((imageData) => {


this.createFileEntry(imageData);

  this.text = "Image Captured";
  this.capturing = true;
    }, (err) => {
  // Handle error
 });
}

createFileEntry(imagePath: string): Promise<any> {
console.log("imageData",imagePath)     //getting image data here

let cleansedPath = imagePath.replace(/^.*[\\\/]/, '');
let d = new Date(); 
let t = d.getTime();
let newFileName: string = t + ".jpg";

return this.file.moveFile(this.file.tempDirectory+imagePath, cleansedPath, 
this.file.dataDirectory, newFileName) 
.then((entry: Entry) =>
console.log("changed",entry) 
)
.catch((err) => err.message)
 }

<div>
{{text}}
<ion-textarea placeholder="Enter a description" [(ngModel)]="description"> 
</ion-textarea>

<ion-grid>
<ion-row>
  <ion-col col-6 *ngIf = "!cbCheck">
    <button ion-button block icon-left color="custom" 
(click)="capturePicture()" standard>
      <ion-icon name="camera"></ion-icon>
      Camera
    </button>
  </ion-col>

  <ion-col col-6>
    <button ion-button color="custom" block [disabled]="!capturing" 
(click)='startUploading()'>Submit</button>
  </ion-col>
 </ion-row>
</ion-grid>

<img [src] = sanitizer.bypassSecurityTrustUrl("capturedUrl") />
</div>

更新模板，请检查一次，并提前致谢 根据建议更新了ts文件，但在控制台中什么也没得到，任何人都可以检查一次

Answer 1

如果使用相机FileURI，则捕获的照片将保存在应用程序的临时目录中。应用程序结束后，该应用程序临时目录的内容将被删除。

capturePicture(){
const option: CameraOptions = {
  quality: 50,
  destinationType: this.camera.DestinationType.FILE_URI,
  encodingType: this.camera.EncodingType.JPEG,
  mediaType: this.camera.MediaType.PICTURE,
}
this.camera.getPicture(option).then((imageData) => {
  this.capturedUrl =  imageData;
        }, (err) => {
  // Handle error
 });
}

还请将此元标记添加到index.html

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: ms-appdata: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

在模板中：

<img [src] = sanitizer.bypassSecurityTrustUrl("capturedUrl") />

组件：

import { DomSanitizer } from '@angular/platform-browser';
constructor(public sanitizer: DomSanitizer){}

使用Fileuri无法提供离子图像预览

1 个答案: