Ionic 3 - ios - 在屏幕上显示选定的图像

Question

我将相机插件设置为 select 来自照片库的图像并使用以下代码将其上传到服务器：

getImage() {
  //By default the camera retrieves the image as a JPEG file.
  const options: CameraOptions = {
    quality: 100,
    destinationType: this.camera.DestinationType.FILE_URI,
    sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
    targetWidth:1080,
    targetHeight:1080,
    correctOrientation: true,
    mediaType: this.camera.MediaType.PICTURE,
    encodingType: this.camera.EncodingType.JPEG

  }

  this.camera.getPicture(options).then((fileUri) => {

    if (this.platform.is('ios')) {
        return this.crop.crop(fileUri, {quality: 100});
      } else if (this.platform.is('android')) {
        // Modify fileUri format, may not always be necessary
        fileUri = 'file://' + fileUri;

        /* Using cordova-plugin-crop starts here */
        return this.crop.crop(fileUri, { quality: 100 });
      }
  }, (err) => {
    console.log(err);

  }).then((path) => {
    // path looks like 'file:///storage/emulated/0/Android/data/com.foo.bar/cache/1477008080626-cropped.jpg?1477008106566'
    console.log('Cropped Image Path!: ' + path);
    this.imagePath = path;
    return path;
  });
}

然后我在屏幕上显示我的图像预览，如下所示：

<img [src]="imagePath"  />

select在 iOS 和 Android 上 select 图像、裁剪和上传工作完美无缺。但是，在 iOS 上无法显示图像。（没有显示）

我的控制台日志显示如下：

2017-12-07 15:06:52.559614-0500 fd-app[2537:1186586] [MC] System group container for systemgroup.com.apple.configurationprofiles path is /private/var/containers/Shared/SystemGroup/systemgroup.com.apple.configurationprofiles 2017-12-07 15:06:52.560425-0500 fd-app[2537:1186586] [MC] Reading from public effective user settings. 2017-12-07 15:06:55.754175-0500 fd-app[2537:1186662] [discovery] errors encountered while discovering extensions: Error Domain=PlugInKit Code=13 "query cancelled" UserInfo={NSLocalizedDescription=query cancelled} 2017-12-07 15:07:04.589982-0500 fd-app[2537:1186586] Cropped Image Path!: file:///var/mobile/Containers/Data/Application/8B2CD0E8-F6AC-4530-BF02-D2F7A188EAC2/tmp/cdv_photo_004.jpg

我尝试将 Photo Library Usage 属性添加到 Info.plist 文件，但这没有帮助。有什么建议可以尝试下一步吗？

更新：不确定这是否与此有关，但我使用的是 Xcode 9.2 beta，因为我的 iPhone 在 11.2

此外，我在谷歌上搜索的所有内容都指向一个事实，即这是一个权限问题，但是，在 select 处理图像后，图像出现在裁剪器中......这让我怀疑某些事情奇怪的是怎么回事？裁剪器如何显示图像而不是 HTML 页面？

Answer 1

如果您正在使用 WKWebview which is the default webview in IOS 11 as per the official blog post, you need to rewrite file:// url，然后再在您的 HTML 中使用。

If you’re working with local files (text files, images, videos), you’ll need to make sure that the path of file does not have file:// in front of it.

import { normalizeURL } from 'ionic-angular';

在你的函数中，

 this.imagePath = normalizeURL(path);
    return path;

进一步检查 troubleshooting section 说的一样。

Answer 2

您也可以尝试使用'DomSanitizer'（由于某些原因，图像被锁定）：

ts

import { DomSanitizer } from '@angular/platform-browser';

constructor(
   public _DomSanitizer: DomSanitizer,
   private cameraCtrl: Camera,
   ...
}


this.cameraCtrl.getPicture(this.options).then((imageData) => {
   this.photoSrc  = 'data:image/jpg;base64,' + imageData;
   this.cameraPhoto = this._DomSanitizer.bypassSecurityTrustUrl(this.photoSrc)
...})

html

<img[src]="cameraPhoto">

Ionic 3 - ios - 在屏幕上显示选定的图像

Ionic 3 - ios - displaying selected image on screen

cordova

cordova-plugins

ionic3

ios11