ReactNative: 使用圖片裁剪組件ImageEditor組件

一、簡介

圖片在應用中的使用非常常見，絢麗的圖片能使App增色不少。當設計師給開發者一張圖片后，有時根據情況需要用到該圖片中的某一部分，當然研發可以讓設計師再設計一張，其實，還有其他的辦法可以實現，例如繪制指定局域的圖片、裁剪圖片等。在ReactNative中，提供了圖片裁剪組件ImageEditor，這個組件可以將一張圖片進行任意的裁剪，獲取需要的那一部分。ImageEditor組件的API相當簡單，僅僅提供了一個靜態方法，下面就來研究一下。

 

二、API

提供的裁剪圖片的靜態方法如下：

//uri：圖片的地址
//cropData：裁剪的規格設置
//success：裁剪成功后的回調
//failure：裁剪失敗后的回調
static cropImage(
    uri: string,
    cropData: ImageCropData,
    success: (uri: string) => void,
    failure: (error: Object) => void
  )

裁剪規格內容如下：

//是一個對象
type ImageCropData = {
  /**
   * 裁剪圖片的起始位置，x和y為偏移坐標
   */
  offset: {
    x: number,
    y: number,
  },
  /**
   * 裁剪圖片的大小。就是按照寬高多少來裁剪
   */
  size: {
    width: number,
    height: number,
  },
  /**
   * 可選值，裁剪完后按照多大尺寸顯示
   */
  displaySize?: ?{
    width: number,
    height: number,
  },
  /**
   * 可選值，裁剪完的圖片按照什么模式顯示
   * resizeMode: 圖片顯示模式有三個枚舉值，如下：
        cover模式只求在顯示比例不失真的情況下填充整個顯示區域。可以對圖片進行放大或者縮小，超出顯示區域的部分不顯示。
        contain模式是要求顯示整張圖片, 可以對它進行等比縮小, 圖片會顯示完整,可能會露出Image控件的底色。
        stretch模式不考慮保持圖片原來的寬,高比.填充整個Image定義的顯示區域,這種模式顯示的圖片可能會畸形和失真。
   */
  resizeMode?: ?$Enum<{
    contain: string,
    cover: string,
    stretch: string,
  }>,
};

 

三、使用

現在來裁剪一張圖片，示例如下：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';

import {
    AppRegistry,
    StyleSheet,
    View,
    Image,
    ImageEditor
} from 'react-native';


//設置裁剪的規格
const cropData = {
    offset: {x: 120, y: 150},//從原圖裁剪的起始坐標
    size: {width: 400, height: 400},//裁剪的寬高
    displaySize: {width: 100, height: 100},//裁剪后生成圖片的大小
    resizeMode: 'contain', //縮放圖像時使用的調整大小模式
};

export default class ReactNativeDemo extends Component {

    state = {uri:'http://image.biaobaiju.com/uploads/20180803/22/1533306030-xbmaHzIVwL.jpg'};

    constructor(props){
        super(props);

        //裁剪圖片
        ImageEditor.cropImage(this.state.uri,cropData,
            (new_uri)=>{
                this.setState({
                    uri: new_uri
             })
        }, (error)=>{
            console.log('error:'+error);
        });
    }

    render() {
        return (
            <View style={[styles.flex,styles.bgColor,styles.center]}>
                <Image
                    source={{uri:`${this.state.uri}`}}
                    resizeMode="stretch"
                    style={{width:300,height: 300}}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    flex: {
        flex: 1
    },
    bgColor: {
      backgroundColor: 'white'
    },
    center: {
        alignItems: 'center',
        justifyContent: 'center'
    },
    font: {
        fontSize: 30,
        color: 'purple',
        textAlign: 'center'
    },
    size: {
        height: 50
    }
});

AppRegistry.registerComponent('ReactNativeDemo', () => ReactNativeDemo);

原圖和裁剪圖對比如下。左邊為原圖、右邊為剪完圖