2

我正在使用带有电容器的 ionic 3 制作壁纸应用程序，我想在我的应用程序中下载和共享功能，该功能执行共享/下载图像。

我的图像是从 json 数据中获取的，

请有人帮我解决这个问题。以下是我检查过的代码。

我编写代码以使用 API 获取 Pixabay 站点图像，我想要图像共享功能。

这个项目是使用 Capcitor 构建 Ionic，它为我们提供了 Native 应用程序。

提供者：

import { Http } from '@angular/http';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';        

@Injectable()
export class ImgProvider {

  key: string = 'API-KEY';
  //search: string = 'quotes';

  url = 'https://pixabay.com/api/?key=';

  constructor(public http: Http) {  }

  public getimages(query:any){
  return this.http.get(this.url + this.key+ "&q=" +query+ "&image_type=photo")
  .map(res => res.json());
  }
}

Contact.ts代码：

import { Component } from '@angular/core';
import { NavController, LoadingController, ActionSheetController } from 'ionic-angular';
import { ImageViewerController } from 'ionic-img-viewer';
import { Http } from '@angular/http';
import { ImgProvider } from '../../providers/img/img';
import 'rxjs/add/operator/map';
import { SocialSharing } from '@ionic-native/social-sharing';
import { FileTransfer, FileTransferObject } from '@ionic-native/file-transfer';
import { Platform } from 'ionic-angular/platform/platform';
import { File } from '@ionic-native/file';

declare var cordova: any;

@Component({
  selector: 'page-contact',
  templateUrl: 'contact.html',
  providers: [ImgProvider]

})

export class ContactPage {
  posts = {};
  search = {
  params: 'nature'
  };
  _imageViewerCtrl: ImageViewerController;

  constructor(
    public navCtrl: NavController,
    private transfer: FileTransfer,
    imageViewerCtrl: ImageViewerController,
    public http: Http,
    private file: File,
    public platform : Platform,
    private socialSharing: SocialSharing,
    public Provider: ImgProvider,
    private actionSheetController: ActionSheetController,
    public loadingController:LoadingController) {

    this.Provider.getimages;    
  }

  ionViewDidLoad(){
    let postsLoadingController = this.loadingController.create({
        content: "getting your images from server"
    });
    postsLoadingController.present();

    this.Provider.getimages(this.search.params)
        .subscribe((data) => {
            postsLoadingController.dismiss();
            this.posts = data
        });
  }


  presentImage(myImage) {
    const imageViewer = this._imageViewerCtrl.create(myImage);
    imageViewer.present();

    setTimeout(() => imageViewer.dismiss(), 1000);
    imageViewer.onDidDismiss(() => alert('Viewer dismissed'));
  }

  doRefresh(refresher) {
    this.Provider.getimages;  // calls the getimages method
    setTimeout(() => {
    refresher.complete(); // stops the refresher 2 seconds after retrieving the data
    }, 2000);
  }

  compileimg(index):string{
    var img = this.posts[index].image ;
    return img.concat(" \n sent from my awesome app");
  }

  regularShare(index){
    var img = this.compileimg(index);
    this.socialSharing.share(null, null, img, null);
  }

  whatsappShare(index){
    var img = this.compileimg(index);
     this.socialSharing.shareViaWhatsApp(null, img, null);
   }

  shareVia(post){
    let shareViaActionSheet = this.actionSheetController.create({
        title:"Share Image",
        buttons:[
        {
            text:"Share",
            icon:"share",
        handler:()=> {
          this.socialSharing.share(post.type,"", post.image, post.pageURL)
        }

        },
        {
            text:"Cancel",
            role:"destructive"
        }

        ]
    });
    shareViaActionSheet.present();
  }

  swipe(event) {
    if(event.direction === 4) {
      this.navCtrl.parent.select(1);
    }
  }




}
4

0 回答 0