如何在React Native中聚焦裁剪圖像

Question

根據文檔 ，react native的Image組件支持以下resizeModes ：

'cover'，'contains'，'stretch'，'repeat'，'center'

如果圖像是較大的，則Image部件，所述center模式裝配在所述圖像Image通過均勻縮放所述圖像，使得所述圖像的中心點是在中心在部件Image組件。

我想知道是否有一個黑客或解決方案，我們可以將自定義點（比如0,300）定義為焦點，使其成為Image視圖的中心。

我想要實現的有點像fresco焦點作物，但也應該適用於IOS。

Answer 1

我想你需要像這樣處理

const CroppedImage = React.createClass({
  render() {
    return (
      <View
        style={[
          {
            overflow: 'hidden',
            height: this.props.cropHeight,
            width: this.props.cropWidth,
            backgroundColor: 'transparent'
          },
          this.props.style
        ]}
      >
        <Image
          style={{
            position: 'absolute',
            top: this.props.cropTop * -1,
            left: this.props.cropLeft * -1,
            width: this.props.width,
            height: this.props.height
          }}
          source={this.props.source}
          resizeMode={this.props.resizeMode}
        >
          {this.props.children}
        </Image>
      </View>
    );
  }
});

看看這個例子鏈接

Answer 2

React-Native有一個內置的API來處理圖像裁剪， ImageEditor 。 它使圖像裁剪相當簡單。 有關示例，請參閱下面的功能。

輸入的圖像采用URI的形式。 裁剪圖像，並提供指向裁剪圖像的URI（圖像通過React-Native的ImageStore API存放）。 隨后使用此URI可以根據需要顯示裁剪后的圖像。

// Make sure you import ImageEditor from react-native!
async cropImage(){
    // Construct a crop data object. 
    cropData = {
        offset:{x:0,y:0}, 
        size:{width:20, height:20},
    //  displaySize:{width:20, height:20}, THESE 2 ARE OPTIONAL. 
    //  resizeMode:'contain', 
    }
    // Crop the image. 
    try{
        await ImageEditor.cropImage(uri, 
            cropData, (successURI) => {Something awesome with successURI!}, 
            (error) =>{console.log('cropImage,',error)}
        )
    }
    catch(error){
        console.log('Error caught in this.cropImage:', error)
    }
}
// End of function.