如何在React Native中聚焦裁剪图像 [英] How to focus crop image in React Native

问题描述

根据文档，反应原生的图片组件支持以下 resizeModes ：

According to the docs, the react native's Image component support the following resizeModes:

'cover' ，'包含'，'拉伸'，'重复'，'居中'

'cover', 'contain', 'stretch', 'repeat', 'center'

如果图像较大，则图像组件， center 模式通过统一缩放图像使图像适合组件中的 Image 中的图像图像的中心点位于图像组件的中心。

If the image is larger then the Image component, the center mode fits the image in the Image in the component by uniformly scaling the image such that the center point of the image is in center of the Image component.

我想知道是否存在一个黑客或解决方案，我们可以将自定义点（例如0,300）定义为焦点，使其成为焦点图像视图。

I would like to know if there is a hack or a solution in which we can define a custom point (say 0,300) as a focus point such that it is the center of the Image view.

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

What I want to achieve is somewhat like focus crop in fresco, but should also work for IOS.

推荐答案

React-Native有一个内置的API来处理图像裁剪， ImageEditor 。它使图像裁剪相当简单。有关示例，请参阅下面的函数。

React-Native has a built-in API to handle image cropping, ImageEditor. It makes image cropping fairly simple. See the function below for an example.

输入的图像采用URI的形式。图像被裁剪，并提供指向裁剪图像的URI（图像通过React-Native的 ImageStore API）。随后使用此URI显示您想要的裁剪图像。

The inputted image takes the form of a URI. The image is cropped, and a URI pointing to a cropped image is provided (the image is housed via React-Native's ImageStore API). Subsequently use this URI to display the cropped image as you wish.

// 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.

这篇关于如何在React Native中聚焦裁剪图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！