在 Ionic 3 中显示由 Native Camera 拍摄的 FILE_URI 图像答案

【问题标题】：Displaying a FILE_URI image taken by Native Camera in Ionic 3在 Ionic 3 中显示由 Native Camera 拍摄的 FILE_URI 图像
【发布时间】：2018-09-03 20:02:27
【问题描述】：

如何在 Ionic 3 中显示用户使用 @ionic-native/camera 拍摄的 FILE_URI 图像？

我可以使用 Ionic Native 的 Camera 来获取 FILE_URI 图片 URL，结果如下：

file:///var/mobile/Containers/Data/Application/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXX/tmp/cdv_photo_005.jpg

但是，当我尝试通过引用视图模板中的 URI 来将此图像显示给用户时，图像永远不会加载。

我尝试过的事情：

-在视图中直接使用图片URI

<img src="{{profile.image}}">    // Never loads

-通过在页面组件中包含 DomSanitizer 来清理 URI：

<img [src]="domSanitizer.bypassSecurityTrustUrl(profile.image)">    // Never loads

由于性能拖累，我宁愿不使用 base64 图像。我在这里做错了什么？

【问题讨论】：

标签： ionic-framework ionic3 ionic-native

【解决方案1】：

import { normalizeURL } from 'ionic-angular'; ionic3 <img> tag src

<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);
      // Alternatively if the problem only occurs in ios and normalizeURL 
      // doesn't 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));
   });
 }

【讨论】：

你救了我的命，玛安！非常感谢这个答案，我不知道如何解决这个问题......谢谢！！！
关于如何使用同一个插件播放视频的任何想法？
它不工作。文件 uri 没有加载到图像上。

【解决方案2】：

你好尝试使用文件路径离子插件

path = "file:///var/mobile/Containers/Data/Application/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXX/tmp/cdv_photo_005.jpg";
this.filePath.resolveNativePath(path)
   .then(filePath => console.log(filePath))
   .catch(err => console.log(err));

请阅读文档 https://ionicframework.com/docs/native/file-path/

【讨论】：

【解决方案3】：

您可以使用下面的代码来显示图像

savePhotoClick = () =>{

const options: CameraOptions = {
  quality: 70,
  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 (DATA_URL):
  this.base64Image = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
  // Handle error
});

然后使用img标签进行展示

 <img [src]="base64Image" *ngIf="base64Image" />

【讨论】：