亚洲久久天,老王福利3亚洲国产,123啪啪啪

一、背景介紹

最近公司項(xiàng)目中用到ionic2重構(gòu)app，在研究相機(jī)調(diào)用的時(shí)候發(fā)現(xiàn)官方API似乎有點(diǎn)誤導(dǎo)人，所以在這里介紹下我的實(shí)際經(jīng)驗(yàn)

官方相機(jī)API（這個(gè)參考就行了，有錯(cuò)的，文章最后分析）
官方圖片預(yù)覽API （這個(gè)同樣的毛?。?/p>

當(dāng)前官方最新ionic版本：2.3.0
我的ionic版本：2.2.11
但是因?yàn)閚ative API文檔側(cè)欄中沒有版本的選擇，所以我估計(jì)還是官方文檔有錯(cuò)誤的可能性比較大

PS: 如果調(diào)用后打包出錯(cuò)，請看ionic2 編譯失?。╕ou have not accepted the license agreements of the following SDK components）

二、調(diào)用相機(jī)

安裝依賴

ionic plugin add cordova-plugin-camera  //相機(jī)依賴
ionic plugin add com-sarriaroman-photoviewer  //圖片預(yù)覽依賴

在調(diào)用頁面的ts文件中引入

import { Camera, PhotoViewer } from 'ionic-native';

調(diào)用相機(jī)

public base64Img:  string = '';
public takePicture(){
    //相機(jī)參數(shù)配置
    const options = {
      quality: 50,  //照片質(zhì)量，1-100，默認(rèn)50
      destinationType: Camera.DestinationType.DATA_URL,  //返回的數(shù)據(jù)類型，默認(rèn)DATA_URL
      enodingType: Camera.EncodingType.JPEG,  //照片格式，默認(rèn)JPEG，還有PNG可選
      mediaType: Camera.MediaType.PICTURE,  //媒體類型，默認(rèn)PICTURE->照片，還有VIDEO等可以選
      sourceType: Camera.PictureSourceType.CAMERA  //來源類型，默認(rèn)CAMERA->相機(jī)，還有PHOTOLIBRARY->相冊等可以選
    }

    Camera.getPicture(options).then((imageData) => {
     // imageData is either a base64 encoded string or a file URI
     // If it's base64:
     this.base64Img = 'data:image/jpeg;base64,' + imageData;
     console.log(this.base64Img)
    }, (err) => {
     // Handle error
     console.log(err)
    });
  }

調(diào)用相冊（其實(shí)就改下options.sourceType ）

public base64Img:  string = '';
public takePicture(){
    //相機(jī)參數(shù)配置
    const options = {
      quality: 50,  //照片質(zhì)量，1-100，默認(rèn)50
      destinationType: Camera.DestinationType.DATA_URL,  //返回的數(shù)據(jù)類型，默認(rèn)DATA_URL
      enodingType: Camera.EncodingType.JPEG,  //照片格式，默認(rèn)JPEG，還有PNG可選
      mediaType: Camera.MediaType.PICTURE,  //媒體類型，默認(rèn)PICTURE->照片，還有VIDEO等可以選
      sourceType: Camera.PictureSourceType.PHOTOLIBRARY//來源類型，默認(rèn)CAMERA->相機(jī)，還有PHOTOLIBRARY->相冊等可以選
    }

    Camera.getPicture(options).then((imageData) => {
     // imageData is either a base64 encoded string or a file URI
     // If it's base64:
     this.base64Img = 'data:image/jpeg;base64,' + imageData;
     console.log(this.base64Img)
    }, (err) => {
     // Handle error
     console.log(err)
    });
  }

圖片預(yù)覽

public PhotoViewer(){
    PhotoViewer.show(this.base64Img, '拍攝照片')
}

頁面調(diào)用方法

<button ion-button full (click)="takePicture()">拍攝照片</button>  //調(diào)用相機(jī)
<button ion-button full (click)="choosePicture()">選擇照片</button>  //調(diào)用相冊
<ion-img width="150" src={{base64Img}} (click)="PhotoViewer()"></ion-img>  //照片預(yù)覽

三、效果展示

調(diào)用相機(jī).jpg

圖片預(yù)覽.jpg

四、官網(wǎng)錯(cuò)誤原因分析

以下是官網(wǎng)上的調(diào)用方式：

官網(wǎng)調(diào)用.png
實(shí)際掉用錯(cuò)誤之一
首先像官網(wǎng)那樣在構(gòu)造函數(shù)中注入camera實(shí)例，實(shí)際調(diào)用this.camera時(shí)報(bào)錯(cuò)，報(bào)錯(cuò)提示getPicture方法不在Camera類中

報(bào)錯(cuò)1.png

查看Camera原始代碼，發(fā)現(xiàn)getPicture方法是static靜態(tài)方法，所以不能夠使用Camera類的實(shí)例去掉用，也就是說此處不用進(jìn)行依賴注入，
直接掉用Camera.getPicture()就行

`getPicture`方法.png

而且文檔內(nèi)部的調(diào)用注釋寫的很清楚

文檔內(nèi)部掉用注釋.png
實(shí)際掉用錯(cuò)誤之二
定義相機(jī)配置參數(shù)options的時(shí)候，限定類型為CameraOptions，實(shí)際使用時(shí)，會(huì)導(dǎo)致encodingType屬性報(bào)錯(cuò)，說其不在CameraOptions中，但實(shí)際上的確是有定義的，這個(gè)暫時(shí)還沒想明白為什么
CameraOptions使用報(bào)錯(cuò)

CameraOptions錯(cuò)誤.png

CameraOptions源碼中的確包含encodingType

CameraOptions源碼.png