如何在 React Native 中聚焦裁剪图像答案

【问题标题】：How to focus crop image in React Native如何在 React Native 中聚焦裁剪图像
【发布时间】：2016-11-16 08:15:29
【问题描述】：

根据docs，react native 的Image 组件支持如下resizeModes：

“覆盖”、“包含”、“拉伸”、“重复”、“中心”

如果图像比Image 组件大，center 模式通过统一缩放图像以使图像的中心点在@ 987654327@ 组件。

我想知道是否有破解或解决方案，我们可以将自定义点（例如 0,300）定义为焦点，使其成为 Image 视图的中心。

我想要实现的有点像fresco 中的焦点裁剪，但也应该适用于 IOS。

【问题讨论】：

标签： javascript android ios reactjs react-native

【解决方案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>
    );
  }
});

看看这个例子 Link

【讨论】：

感谢您的回答。我能想到的所有搜索词都导致在“图像处理和创建新文件”的意义上裁剪图像。此答案使用样式属性来更改图像的可视区域。

【解决方案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.

【讨论】：

我还有其他要求，即使用（x、y、宽度、高度）在所需位置捕获图像的一部分。这个答案对我有帮助:) 谢谢。