1

我正在使用电容器插件来获取图像文件（来自相机或画廊）。PC 和 Android 运行良好，但代码在 iPhone 上崩溃。

它打开画廊，我抓取图像并在尝试显示时崩溃

我检查了权限，它们都已设置。为什么它只会在ios上崩溃？是不是字符串有问题？安全？

HTML：

< ion-img role="button" class="image" [src]="selectedImage" *ngIf="selectedImage" >

交易代码：

Plugins.Camera.getPhoto({
    quality: 100,
    source: CameraSource.Prompt,
    correctOrientation: true,
    allowEditing: false,
    resultType: CameraResultType.Base64
})
 .then(image => {
      this.selectedImage = image.base64Data; // VAR TO DISPLAY IN HTML
  })

错误日志 https://i.imgur.com/jrSgGeW.jpg

编辑：现在我使用 DomSanitizer 和 SafeResourceUrl 来变量。错误停止，但图像不会显示

4

5 回答 5

4

更改此行

this.selectedImage = "data:image/jpeg;base64, " + image.base64Data;
于 2019-05-22T06:31:59.593 回答
2

由于您想显示图像而不使用base64数据，请使用DataUrlresultType。

对于您的代码示例，它应该是

Plugins.Camera.getPhoto({
    quality: 100,
    source: CameraSource.Prompt,
    correctOrientation: true,
    allowEditing: false,
    resultType: CameraResultType.DataUrl
})
 .then(image => {
      this.selectedImage = image.dataUrl; // VAR TO DISPLAY IN HTML
 })

但是，当您使用 Angular 时，建议对数据进行清理，它应该是这样的：

this.selectedImage = this.sanitizer.bypassSecurityTrustResourceUrl(image && (image.dataUrl));

在此处查看完整的离子角度示例https://capacitor.ionicframework.com/docs/guides/ionic-framework-app

于 2019-05-22T12:40:30.660 回答
2

HTML：

<img class="ox-picture" [src]="display(b64)"/>

TS：

constructor(public dms: DomSanitizer) {}

display(b64: string) {
  return this.dms.bypassSecurityTrustUrl("data:image/jpeg;base64," + b64);
}
于 2019-05-22T15:07:40.310 回答
1

我遇到了同样的问题，但是在相机选项中更改照片的尺寸对我来说很有效。我正在使用 Cordova，但我会尽力转换为电容器。

科尔多瓦：

const options: CameraOptions = {
      quality: 75,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      saveToPhotoAlbum: true,
      correctOrientation: true,
      targetHeight: 1024,
      targetWidth: 768
    }

电容器：

const image = await Camera.getPhoto({ 
       quality: 75,//Test
       source: CameraSource.Prompt,
       correctOrientation: true,
       allowEditing: false,
       resultType: CameraResultType.Base64
       height : 1024,//Test
       width : 768//Test
    }

电容器文档在这里。

于 2019-05-22T14:02:46.480 回答
0

来自官方文档：

零件：

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

html

<img src={base64Image} />
于 2019-05-22T12:49:59.937 回答