Question

我设置相机插件以从照片库中选择图像并使用以下代码将其上传到服务器：

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"  />

在iOS和Android上，选择图像，裁剪和上传工作都非常好。但是，在iOS上，图像的显示不起作用。（什么都没有显示）

我的控制台日志显示以下内容：

2017-12-07 15:06:52.559614-0500 fd-app [2537：1186586] [MC] systemgroup.com.apple.configurationprofiles路径的系统组容器是/ private / var / containers / Shared / SystemGroup / systemgroup.com.apple.configurationprofiles 2017-12-07 15：06：52.560425-0500 fd-app [2537：1186586] [MC]从公共有效用户设置中读取。 2017-12-07 15:06:55.754175-0500 fd-app [2537：1186662] [发现]发现扩展时遇到的错误：错误域= PlugInKit代码= 13＆＃34;查询已取消＆＃34; UserInfo = {NSLocalizedDescription =查询已取消} 2017-12-07 15：07：04.589982-0500 fd-app [2537：1186586]裁剪图像路径！：file：/// var / mobile / Containers / Data / Application / 8B2CD0E8-F6AC-4530-BF02-D2F7A188EAC2 / TMP / cdv_photo_004.jpg

我尝试将照片库使用情况属性添加到Info.plist文件中，但这没有帮助。有什么建议可以尝试下一步吗？

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

此外，我搜索的所有内容都指向这是一个权限问题，但是，选择图片后，图片会出现在裁剪器中...这让我怀疑这里发生了一些奇怪的事情？裁剪器如何显示图像而不显示HTML页面？

Answer 1

如果您使用的WKWebview是官方blog post中IOS 11中的默认网页浏览量，则需要先rewrite file://网址，然后再使用您的HTML

如果您正在使用本地文件（文本文件，图像，视频），则需要确保文件路径前面没有file：//。

import { normalizeURL } from 'ionic-angular';

在你的功能中，

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

进一步检查相同的troubleshooting section。

Answer 2

你也可以尝试使用DomSanitizer＆＃39; （由于某种原因，图像被锁定）：

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 - 在屏幕上显示所选图像

2 个答案: