React Native 图像裁剪

Question

我对 React Native 和 Expo 还很陌生，所以请原谅我的无知。 我正在使用 Expo（RN：0.74.1，Expo：51.0.8）构建一个应用程序，它需要显示来自外部 URL 的图像并能够裁剪它。 我已经实现了一个使用 ImagePicker 的版本，但这要求我必须将图像保存到用户的图片中，然后要求他们从那里选择它。 我正在寻找一种直接裁剪图像的方法，而无需保存文件并弹出选择器。

我正在查看 https://github.com/st0ffern/react-native-image-cropper，但我担心该插件已经很旧了（最后一个版本是 2017 年的）。 我找不到其他合适的东西。 我确实找到了一些 React 组件，但我不确定是否可以在 React Native 中使用它们。

我也在寻找一种方法来弹出已选择图像的图像选择器，但我在文档中找不到任何允许我这样做的内容。

关于如何进行有什么建议吗？

Answer 1

 *Using react-native-image-crop-picker
    import ImagePicker from 'react-native-image-crop-picker';
    
    ImagePicker.openCropper({
      path: 'https://example.com/image.jpg',
      width: 300,
      height: 400
    }).then(image => {
      console.log(image);
    });
 *Using expo-image-crop
    import { ImageCrop } from 'expo-image-crop';
    import React, { useState } from 'react';
    import { View, Button, Image } from 'react-native';
    
    const App = () => {
      const [croppedImage, setCroppedImage] = useState(null);
    
      const handleCrop = async () => {
        const result = await ImageCrop.openCropper({
          uri: 'https://example.com/image.jpg',
          aspect: [4, 3]
        });
        setCroppedImage(result.uri);
      };
    
      return (
        <View>
          <Button title="Crop Image" onPress={handleCrop} />
          {croppedImage && <Image source={{ uri: croppedImage }} style={{ width: 100, height: 100 }} />}
        </View>
      );
    };
    
    export default App;
 *Using react-native-image-editor with Expo
    import React, { useState } from 'react';
    import { View, Button, Image } from 'react-native';
    import ImageEditor from '@react-native-community/image-editor';
    
    const App = () => {
      const [croppedImage, setCroppedImage] = useState(null);
    
      const handleCrop = async () => {
        const cropData = {
          offset: { x: 0, y: 0 },
          size: { width: 300, height: 300 },
          displaySize: { width: 300, height: 300 },
          resizeMode: 'contain',
        };
    
        ImageEditor.cropImage('https://example.com/image.jpg', cropData).then((uri) => {
          setCroppedImage(uri);
        }).catch((error) => {
          console.error(error);
        });
      };
    
      return (
        <View>
          <Button title="Crop Image" onPress={handleCrop} />
          {croppedImage && <Image source={{ uri: croppedImage }} style={{ width: 100, height: 100 }} />}
        </View>
      );
    };
    
    export default App;