Question

我已经尝试使用我的离子应用程序的相机插件，它的工作成功。当我试图与社交分享分享它崩溃和关闭。请找到代码来纠正我的错误。

注意：如果相机图片没有超过base64image，则共享工作正常。如果图片存在崩溃所以我认为错误可能与base64image有关我无法指出错误让我帮忙。

home.ts文件

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';
import { SocialSharing } from '@ionic-native/social-sharing';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  public base64Image: string;
  
  constructor(public navCtrl: NavController, private camera: Camera, private socialSharing:SocialSharing) {

  }
opencamera()
{
  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:
    this.base64Image = 'data:image/jpeg;base64,' + imageData;
  }, (err) => {
   // Handle error
  });
  
  console.log('clicked camera button');


}
sharing()
{
  this.socialSharing.canShareViaEmail().then(() => {
    // Sharing via email is possible
    console.log('sharing is successfull');
  }).catch(() => {
    // Sharing via email is not possible
  });
  
  // Share via email
  this.socialSharing.shareViaWhatsAppToReceiver('98947XXXXX', 'checking sample', 'this.base64Image', null)
  .then(() => {
    // Success!
    console.log('shared');
  }).catch(() => {
    // Error!
  });
}

}

home.html file

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button icon-only (click)=opencamera() >
    <ion-icon name="camera">camera</ion-icon>
  </button>
  Latest Picture:
  <img [src]="base64Image" *ngIf="base64Image" />
  <button ion-button round (click)=sharing()>share</button>
  <button ion-button secondary menuToggle>Toggle Menu</button>
</ion-content>

Answer 1

就像你在the docs中看到的那样：

DATA_URL可能非常耗费内存，导致应用崩溃或内存不足错误。如果可能，请使用FILE_URI或NATIVE_URI

这是我通常用于拍摄和分享照片的代码的一部分。共享部分与您的完全不同，但您可以对其进行修改，然后根据您的要求进行调整。

<强>组件

// Angular
import { Component, NgZone } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

// Ionic
import { Platform } from 'ionic-angular';

// Cordova plugins
import { Camera, CameraOptions } from '@ionic-native/camera';
import { SocialSharing } from '@ionic-native/social-sharing';

@Component({ 
    selector: 'page-share', 
    templateUrl: 'share.html' 
})
export class SharePage {

    public imageUrl: string;
    public imageUrlToShare: string;

    constructor(private platform: Platform,
                private ngZone: NgZone,
                private domSanitizer: DomSanitizer,
                private camera: Camera,
                private socialSharing: SocialSharing) {}

    public onTakePictureClick(): void {
        const options: CameraOptions = {
            quality: 100,
            destinationType: this.camera.DestinationType.FILE_URI, // <-- User FILE_URI to prevent the memory error :)
            correctOrientation: true,
            encodingType: this.camera.EncodingType.JPEG,
            mediaType: this.camera.MediaType.PICTURE
        }

        // Use the plugin to get the photo from the camera
        this.getPhotoWithOptions(options);
    }

    private getPhotoWithOptions(options: CameraOptions): void {
        this.camera.getPicture(options).then((imageData) => {
            this.getPhotoUrl(imageData);
        }, (err) => {
            // Handle the error!!
            console.log(err);
        });
    }

    private getPhotoUrl(uri: string): void {
        if (!uri) { return; }

        // iOS fix for getting the proper url
        uri = this.platform.is('ios') && uri.indexOf('file://') < 0 ? `file://${uri}` : uri;

        (<any>window).resolveLocalFileSystemURL(uri, entry => {
            this.ngZone.run(() => {

                // Use this property to show the image on the view
                this.imageUrl = entry.toInternalURL();

                // Use this property to share the image using the SocialSharing plugin
                this.imageUrlToShare = entry.toURL();

            });
        });
    }

    public onShareClick(): void {
        const options = {
            message: null, // not supported on some apps (Facebook, Instagram)
            subject: null, // fi. for email
            files: [this.imageUrlToShare] // an array of filenames either locally or remotely
        };

        this.socialSharing.shareWithOptions(options)
            .catch(error => {
                // Handle the error!!
                console.log(err);
            })

    }

    public getTrustResourceUrl(url: string) {
        return this.domSanitizer.bypassSecurityTrustResourceUrl(url);
    }
}

查看

<ion-header> <ion-navbar color="primary"> <ion-title>Share</ion-title> </ion-navbar> </ion-header> <ion-content padding> <div *ngIf="imageUrl" class="image-container"> <img class="image" [src]="getTrustResourceUrl(imageUrl)" alt="Picture"> </div> <button (click)="onTakePictureClick()" ion-button block icon-left> <ion-icon name="camera"></ion-icon>Take picture </button> <button *ngIf="imageUrl" (click)="onShareClick()" ion-button block icon-left> <ion-icon name="share-alt"></ion-icon>Share </button> </ion-content>

在离子3中共享图像时崩溃

1 个答案: