如何在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.