Ionic 3 - ios - 在屏幕上显示选定的图像 [英] Ionic 3 - ios - displaying selected image on screen

问题描述

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

I set up the camera plugin to select an image from the photo library and upload it to the server with the following code:

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

然后我像这样在屏幕上显示我的图像预览:

I then display my image preview on the screen like so:

<img [src]="imagePath"  />

选择图像、裁剪和上传在 iOS 和 Android 上都可以正常工作.但是，在 iOS 上，图像的显示不起作用.(什么都没有显示)

The selecting image, cropping and uploading work perfectly fine on both iOS and Android. However, on iOS the displaying of the image does not work. (Nothing shows up)

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

My console log shows the following:

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.configurationprofiles2017-12-07 15:06:52.560425-0500 fd-app[2537:1186586] [MC] 从公共有效用户设置中读取.2017-12-07 15:06:55.754175-0500 fd-app[2537:1186662] [discovery] 发现扩展时遇到错误:Error Domain=PlugInKit Code=13 "query cancelled" UserInfo={NSLocalizedDescription=query cancelled}2017-12-07 15:07:04.589982-0500 fd-app[2537:1186586] 裁剪图像路径！:file:///var/mobile/Containers/Data/Application/8B2CD0E8-F6AC-4530-BF02/88FEACA2tmp/cdv_photo_004.jpg

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 文件，但这没有帮助.有什么建议可以尝试下一步吗?

I tried adding Photo Library Usage property to the Info.plist file but that didn't help. Any suggestions what to try next?

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

UPDATE: Not sure if this has anything to do with it but I am using Xcode 9.2 beta because my iPhone is on 11.2

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

Also, everything I'm googling is pointing to the fact that this is a permissions problem, however, after selecting the image, the image appears in the cropper... this makes me suspect something odd is going on here? How can the cropper show the image but not the HTML page?

推荐答案

如果您使用的是 WKWebview根据官方博客文章，是IOS 11中的默认webview，您需要重写 file:// url，然后再用于 HTML.

If you are using WKWebview which is the default webview in IOS 11 as per the official blog post, you need to rewrite the file:// url before using in your HTML.

如果您正在处理本地文件(文本文件、图像、视频)，您需要确保文件路径前没有 file://.

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;

进一步检查 故障排除部分一样.

这篇关于Ionic 3 - ios - 在屏幕上显示选定的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！