天天看點
傳回

Expo大作戰(三十六)--expo sdk api之 ImagePicker，ImageManipulator，Camera

Expo大作戰(三十六)--expo sdk api之 ImagePicker，ImageManipulator，Camera

簡要：本系列文章講會對expo進行全面的介紹，本人從2017年6月份接觸expo以來，對expo的研究斷斷續續，一路走來将近10個月，廢話不多說，接下來你看到内容，講全部來與官網

我猜去全部機翻+個人修改補充+demo測試的形式，對expo進行一次大補血！歡迎加入expo興趣學習交流群：597732981

【之前我寫過一些列關于expo和rn入門配置的東i西，大家可以點選這裡檢視：從零學習rn開發】

相關文章：

Expo大作戰(一)--什麼是expo，如何安裝expo clinet和xde，xde如何使用

Expo大作戰(二)--expo的生命周期，expo社群交流方式，expo學習必備資源，開發使用expo時關注的一些問題

Expo大作戰(三)--針對已經開發過react native項目開發人員有針對性的介紹了expo，expo的局限性，開發時項目選型注意點等

Expo大作戰(四)--快速用expo建構一個app，expo中的關鍵術語

Expo大作戰(五)--expo中app.json 檔案的配置資訊

Expo大作戰(六)--expo開發模式，expo中exp指令行工具，expo中如何檢視日志log，expo中的調試方式

Expo大作戰(七)--expo如何使用Genymotion模拟器

Expo大作戰(八)--expo中的publish以及expo中的link，對link這塊東西沒有詳細看，大家可以來和我交流

更多>>

寫在二十三章以後的話，之前的翻譯，不管如何，好與不好，終究是告一段落，也把expo基礎理論的東西又深入的了解了一遍，後續expo大作戰系列将主要介紹expo sdk的api。

ImageManipulator

修改存儲在應用程式範圍中的圖像的API。

Expo.ImageManipulator.manipulate（uri，actions，saveOptions）

操作通過uri提供的圖像。可用的修改是旋轉，翻轉（鏡像），調整大小和裁剪。每次調用都會生成一個新檔案。通過一次調用，您可以提供一組要在圖像上執行的操作。随着圖像被緩存，覆寫源檔案不會影響顯示結果。

參數

uri（string） - 要操作的檔案的URI。應該在應用程式的範圍内。

actions（array） -

表示操作選項的對象數組。每個對象都應該具有下列其中一個鍵：

  • resize (object) 調整大小（對象） - 形狀為{width，height}的對象。值對應于結果圖像尺寸。如果隻指定一個值，則另一個值将自動設定以保持圖像比例。
  • rotate (number) 旋轉（數字） - 度旋轉圖像。正值時順時針旋轉，負值時逆時針旋轉。
  • flip (object) 翻轉（對象） - 形狀{垂直，水準}（{ vertical, horizontal }）的對象。将字段設定為true，将圖像翻轉到指定的軸。
  • crop (object)  裁切（對象） - 形狀為{originX，originY，width，height}的對象。字段指定裁剪矩形的左上角和尺寸。
saveOptions（對象） - 定義應如何儲存已修改圖像的映射：
  • compress（number） - 範圍為0 - 1的值，指定結果圖像的壓縮級别。 1表示不壓縮，0表示最高壓縮。
  • format (string)  - 'jpeg'或'png'。指定應使用哪種類型的壓縮以及結果檔案擴充名是什麼。 PNG壓縮是無損但更慢，JPEG更快，但圖像有可見的文物。預設為'jpeg'。（JPEG is faster but the image has visible artifacts. Defaults to 

    'jpeg'

     .）
  • base64（boolean） - 是否還包含Base64格式的圖像資料。

傳回

傳回{uri，width，height}其中uri是修改後圖像的URI（可用作圖像/視訊元素的源），width，height指定圖像的尺寸。它還可以包含base64 - 如果base64 saveOption真的是包含的，并且是包含Base64中圖像的JPEG / PNG（取決于格式）資料的字元串，則預先使用''data:image/xxx;base64,'取資料URI，您可以将其用作Image元素的源（例如，xxx是'jpeg'或'png'）。

基本示例

這将首先順時針旋轉圖像90度，然後垂直翻轉旋轉的圖像并将其儲存為PNG。

import React from 'react';
import { Button, TouchableOpacity, Text, View, Image } from 'react-native';
import { Asset, ImageManipulator } from 'expo';

import Colors from '../constants/Colors';

export default class ImageManipulatorSample extends React.Component {
  state = {
    ready: false,
    image: null,
  };

  componentWillMount() {
    (async () => {
      const image = Asset.fromModule(require('../path/to/image.jpg'));
      await image.downloadAsync();
      this.setState({
        ready: true,
        image,
      });
    })();
  }

  render() {
    return (
      <View style={{ flex: 1 }>
        <View style={{ padding: 10 }}>
          <Button onPress={this._rotate90andFlip} />
          {this.state.ready && this._renderImage()}
        </View>
      </View>
    );
  }

  _rotate90andFlip = async () => {
    const manipResult = await ImageManipulator.manipulate(
      this.state.image.localUri || this.state.image.uri,
      [{ rotate: 90}, { flip: { vertical: true }}],
      { format: 'png' }
    );
    this.setState({ image: manipResult });
  }

  _renderImage = () => {
    return (
      <View style={{marginVertical: 10, alignItems: 'center', justifyContent: 'center'}}>
        <Image
          source={{ uri: this.state.image.localUri || this.state.image.uri }}
          style={{ width: 300, height: 300, resizeMode: 'contain' }}
        />
      </View>
    );
  };
}

ImagePicker

提供系統使用者界面的通路權限，用于從手機庫中選擇圖像和視訊，或者使用相機拍攝照片。

Expo.ImagePicker.launchImageLibraryAsync(options)

顯示用于從手機庫中選擇圖像或視訊的系統UI。

options(object) -

兩種選項的地圖：

  • mediaTypes（string） - 選擇要選擇的媒體類型。用法：ImagePicker.MediaTypeOptions.<Type>，其中<Type>是以下其中一個：Images，Videos，All。
  • allowsEditing (boolean) - 是否顯示一個使用者界面以便在選取後編輯圖像/視訊。圖像：在Android上，使用者可以裁剪和旋轉圖像，并在iOS上裁剪。視訊：在iOS使用者可以修剪視訊。預設為false。
圖像選項的地圖：
  • aspect（array） - 一個包含兩個條目[x，y]的數組，指定要允許使用者編輯圖像的寬高比（通過傳遞allowedEditing：true）。這僅适用于Android，因為iOS上的裁剪矩形總是正方形。
  • quality (number)  - 指定壓縮品質，從0到1. 0表示小尺寸壓縮，1表示壓縮以獲得最高品質。
  • exif（boolean） - 是否也包含圖像的EXIF資料。

如果使用者取消選擇，則傳回{cancel：true}。

否則，傳回{cancel：false，uri，width，height，type}其中uri是本地媒體檔案的URI（可用作Image / Video元素的源），width，height指定媒體的尺寸和類型是圖像或視訊的一種，告訴我們選擇了哪種媒體。圖像也可以包含base64和exif鍵。如果base64選項是真的，則包含base64，并且是包含Base64中圖像的JPEG資料的字元串（使用'data：image / jpeg; base64'），以擷取資料URI，您可以将其用作源例如，一個Image元素。如果exif選項是真的，則包含exif，并且是包含圖像的EXIF資料的對象 - 其屬性的名稱是EXIF标簽，其值是這些标簽的值。如果選擇了視訊，則傳回對象包含額外的鍵持續時間，以毫秒為機關指定視訊的持續時間。

import React from 'react';
import { Button, Image, View } from 'react-native';
import { ImagePicker } from 'expo';

export default class ImagePickerExample extends React.Component {
  state = {
    image: null,
  };

  render() {
    let { image } = this.state;

    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Button
          title="Pick an image from camera roll"
          onPress={this._pickImage}
        />
        {image &&
          <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
      </View>
    );
  }

  _pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      allowsEditing: true,
      aspect: [4, 3],
    });

    console.log(result);

    if (!result.cancelled) {
      this.setState({ image: result.uri });
    }
  };
}

Expo.ImagePicker.launchCameraAsync（toptions）

顯示用相機拍攝照片的系統UI。

選項圖：

  • allowsEditing（boolean） - 是否顯示UI以在拾取後編輯圖像。在Android上，使用者可以裁剪和旋轉圖像，并在iOS上裁剪。預設為false。
  • aspect（array） - 一個包含兩個條目[x，y]的數組，指定要允許使用者編輯圖像的寬高比（通過傳遞allowsEditing：true）。這僅适用于Android，因為iOS上的裁剪矩形總是正方形。
  • exif（boolean） - 是否也包含圖像的EXIF資料。在iOS上，EXIF資料不包括相機外殼中的GPS标簽。

如果使用者取消拍攝照片，則傳回{cancel：true}。

否則，傳回{取消：false，uri，width，height，exif，base64}其中uri是本地圖像檔案的URI（可用作Image元素的源），width，height指定圖像的尺寸。如果base64選項是真的，則包含base64，并且是包含Base64中圖像的JPEG資料的字元串（使用'data：image / jpeg; base64'），以擷取資料URI，您可以将其用作源例如，一個Image元素。如果exif選項是真的，則包含exif，并且是包含圖像的EXIF資料的對象 - 其屬性的名稱是EXIF标簽，其值是這些标簽的值。

當你運作上個例子并選擇一個圖像時，你會看到你選擇的圖像出現在你的應用程式中，并且類似于以下内容的資訊被記錄到控制台中：

{
  "cancelled":false,
  "height":1611,
  "width":2148,
  "uri":"file:///data/user/0/host.exp.exponent/cache/cropped1814158652.jpg"
}

相機（Camera）

React元件，用于呈現裝置的前置或後置攝像頭的預覽。 相機的參數，如變焦，自動對焦，白平衡和閃光燈模式均可調節。 通過使用相機，您還可以拍攝照片并錄制儲存在應用程式緩存中的視訊。 此外，該元件還能夠檢測出現在預覽中的人臉和條形碼。

注意：Expo現在隻支援一個Camera預覽。 使用導航時，最佳做法是解除安裝先前渲染的攝像頭元件，以便下一個螢幕可以毫無問題地使用攝像頭。

需要PermissionsCAMERA。 視訊錄制需要Permissions.AUDIO_RECORDING。

import React from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import { Camera, Permissions } from 'expo';

export default class CameraExample extends React.Component {
  state = {
    hasCameraPermission: null,
    type: Camera.Constants.Type.back,
  };

  async componentWillMount() {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({ hasCameraPermission: status === 'granted' });
  }

  render() {
    const { hasCameraPermission } = this.state;
    if (hasCameraPermission === null) {
      return <View />;
    } else if (hasCameraPermission === false) {
      return <Text>No access to camera</Text>;
    } else {
      return (
        <View style={{ flex: 1 }}>
          <Camera style={{ flex: 1 }} type={this.state.type}>
            <View
              style={{
                flex: 1,
                backgroundColor: 'transparent',
                flexDirection: 'row',
              }}>
              <TouchableOpacity
                style={{
                  flex: 0.1,
                  alignSelf: 'flex-end',
                  alignItems: 'center',
                }}
                onPress={() => {
                  this.setState({
                    type: this.state.type === Camera.Constants.Type.back
                      ? Camera.Constants.Type.front
                      : Camera.Constants.Type.back,
                  });
                }}>
                <Text
                  style={{ fontSize: 18, marginBottom: 10, color: 'white' }}>
                  {' '}Flip{' '}
                </Text>
              </TouchableOpacity>
            </View>
          </Camera>
        </View>
      );
    }
  }
}

綜合執行個體

檢視expo / camerja的完整示例。你可以在@ community / camerja上用Expo來試試。

props

  • type
相機面對(Camera facing)。使用Camera.Constants.Type之一。在Type.front時，請使用前置攝像頭。 Type.back時，請使用背面照相機。預設值：Type.back。
  • flashMode
相機閃光模式。使用Camera.Constants.FlashMode之一。啟用時，裝置上的閃光燈将在拍攝時開啟，關閉時不會。設定為Type.auto會在需要時觸發閃光燈，Type.torch在預覽過程中打開閃光燈。預設：關閉。
  • autoFocus
相機自動對焦的狀态。使用Camera.Constants.AutoFocus之一。啟用時，将啟用自動對焦，關閉時不啟用，焦點将鎖定為更改時的狀态，但可以通過focusDepth支架在某些裝置上進行調整。
  • zoom (float)縮放（浮動）
介于0和1之間的值是裝置最大變焦的百分比。 0 - 未縮放，1 - 最大縮放。預設值：0。
  • whiteBalance 白平衡
相機白平衡。使用Camera.Constants.WhiteBalance之一：自動，晴天，陰天，陰影，熒光燈，白熾燈。如果裝置不支援以前使用的任何一個值。
  • focusDepth（float）
距離飛機最鋒利的焦點(Distance to plane of sharpest focus. )。介于0和1之間的值：0 - 無窮遠焦點，1 - 盡可能靠近焦點。預設值：0。
  • ratio (string) 比率（字元串）
僅限Android。表示預覽的寬高比的字元串，例如。 4：3,16：9,1：1。要檢查裝置是否支援比率，請使用getSupportedRatiosAsync。預設值：4：3。
  • onCameraReady（function）
當相機預覽已設定時調用回調。
  • onFacesDetected（function）

在預覽中使用面部檢測結果調用回調。它将收到一個對象，其中包含：

faces（array） - array of faces objects:

  • faceID（number） - 一個臉部辨別符（用于跟蹤，如果同一張臉出現在連續幀上，它将具有相同的faceID）。
  • bounds (object)  - 包含以下内容的對象：
  • origin ({ x: number, y: number })  - 包含視圖坐标的正方形左上角的位置，
  • size（{width：number，height：number}） - 包含視圖坐标中的臉部的正方形的大小，
  • rollAngle（number） - 面部（銀行）的滾動角度，
  • yawAngle（number） - 面部的偏航角度（航向，轉向頭左或右），
  • smileProbability（number） - 面部微笑的機率，
  • leftEarPosition（{x：number，y：number}） - 左耳在視圖坐标中的位置，
  • rightEarPosition（{x：number，y：number}） - 右耳在視圖坐标中的位置，
  • leftEyePosition（{x：number，y：number}） - 左眼在視圖坐标中的位置，
  • leftEyeOpenProbability（數字） - 左眼打開的機率，
  • rightEyePosition（{x：number，y：number}） - 右眼在視圖坐标中的位置，
  • rightEyeOpenProbability（數字） - 右眼是開放的機率，
  • leftCheekPosition（{x：number，y：number}） - 左側臉頰在視圖坐标中的位置，
  • rightCheekPosition（{x：number，y：number}） - 右側臉頰在視圖坐标中的位置，
  • mouthPosition（{x：number，y：number}） - 嘴中心在視圖坐标中的位置，
  • leftMouthPosition（{x：number，y：number}） - 在視圖坐标中嘴巴左邊緣的位置，
  • rightMouthPosition（{x：number，y：number}） - 在視圖坐标中嘴巴右側邊緣的位置，
  • noseBasePosition（{x：number，y：number}） - 鼻座在視圖坐标中的位置。

僅當faceDetectionClassifications屬性設定為.all時才傳回smilingProbability，leftEyeOpenProbability和rightEyeOpenProbability。

僅當faceDetectionLandmarks屬性設定為.all時才會傳回人臉地标的位置。

另請參閱FaceDetector元件。

faceDetectionMode（Camera.Constants.FaceDetection.Mode）

人臉檢測模式。使用Camera.Constants.FaceDetection.Mode.{fast, accurate}之一。

faceDetectionLandmarks（Camera.Constants.FaceDetection.Landmarks）

是否檢測臉上的标志。使用Camera.Constants.FaceDetection.Landmarks。{all，none}之一。有關詳細資訊，請參閱FaceDetector文檔。

faceDetectionClassifications（Camera.Constants.FaceDetection.Classifications）

是否在臉上運作其他分類。使用Camera.Constants.FaceDetection.Classifications。{all，none}之一。有關詳細資訊，請參閱FaceDetector文檔。

onMountError（function）

無法啟動相機預覽時調用回調。它提供了一個包含消息的錯誤對象。

onBarCodeRead（function）

當條碼被成功讀取時調用的回調。該回調提供了一個形狀為{type：string，data：string}的對象，其中的type是指掃描的條形碼類型，data是條形碼中編碼的資訊（在這種情況下是QR碼，這通常是一個URL）

barCodeTypes（array）

條形碼類型的數組。用法：Camera.Constants.BarCodeType.<codeType>其中，codeType是上面列出的之一。預設值：所有支援的條碼類型。例如：barCodeTypes = {[Camera.Constants.BarCodeType.qr]}

方法

要使用Camera公開的方法，必須建立一個元件ref并使用它調用它們。

// ...
<Camera ref={ref => { this.camera = ref; }} />
// ...
snap = async () => {
  if (this.camera) {
    let photo = await this.camera.takePictureAsync();
  }
};

takePictureAsync

拍攝照片并将其儲存到應用的緩存目錄。旋轉照片以比對裝置的方向并縮放以比對預覽。無論如何，在Android上設定比例支援以獲得具有正确尺寸的圖檔是非常重要的。

傳回解析為對象的Promise：{uri，width，height，exif，base64}其中uri是本地圖像檔案的URI（可用作Image元素的源）和width，height指定圖像的尺寸。如果base64選項是true，則包含base64，并且是包含Base64中圖像的JPEG資料的字元串（預先使用data：image / jpg; base64）來擷取資料URI，您可以将其用作源例如，一個Image元素。如果exif選項是真true，則包含exif，并且是包含圖像的EXIF資料的對象 - 其屬性的名稱是EXIF标簽，其值是這些标簽的值。

本地圖像URI是臨時的。使用Expo.FileSystem.copyAsync制作圖像的永久副本。

recordAsync

開始錄制将儲存到緩存目錄的視訊。旋轉視訊以比對裝置的方向。在錄制過程中翻轉相機會導緻停止。

  • quality (VideoQuality) - 指定錄制視訊的品質。用法：Camera.Constants.VideoQuality ['<value>']，可能的值：用于16：9分辨率2160p，1080p，720p，480p（僅限Android）和4：3 4：3（大小為640x480）。如果所選品質不适用于裝置，則選擇最高可用品質。
  • maxDuration（數字） - 以秒為機關的最大視訊持續時間。
  • maxFileSize（數字） - 最大視訊檔案大小（以位元組為機關）。
  • mute (boolean) 靜音（布爾） - 如果存在，視訊将被錄制，沒有聲音。

傳回解析為包含視訊檔案uri屬性的對象的Promise。如果調用stopRecording，則傳回Promise，達到maxDuration和maxFileSize之一或停止相機預覽。

stopRecording

如果正在進行，停止錄制。

getSupportedRatiosAsync

僅限Android。擷取裝置支援的縱橫比，可以通過比例prop傳遞。

傳回解析為表示比率的字元串數組的Promise，例如。 ['4：3'，'1：1']。

支援的條碼格式

Expo大作戰(三十六)--expo sdk api之 ImagePicker，ImageManipulator，Camera

有時當ITF-14條形碼被識别時，它的類型被設定為交錯2of5。

下一張繼續介紹，這一篇主要介紹了：expo sdk api之 ImagePicker，ImageManipulator，Camera！，歡迎大家關注我的微信公衆号，這篇文章是否被大家認可，我的衡量标準就是公衆号粉絲增長人數。歡迎大家轉載，但必須保留本人部落格連結！

Expo大作戰(三十六)--expo sdk api之 ImagePicker ImageManipulator Camera
上一篇: SQLite 查詢本月的資料
下一篇: 使用者IP位址的三個屬性的差別(HTTP_X_FORWARDED_FOR,HTTP_VIA,REM_addr）

繼續閱讀