React Native 图片裁剪示例与技术解答

本示例展示了如何在 React Native 中实现图片裁剪功能。使用 react-native-image-crop-picker 库选择图片并进行裁剪，通过 react-native-image-editor 进行编辑，展示裁剪后的结果。

import React, { useState } from 'react';
import { View, Image, Button } from 'react-native';
import ImagePicker from 'react-native-image-crop-picker';
import { cropImage } from 'react-native-image-editor';

const ImageCropExample = () => {
  const [imageUri, setImageUri] = useState(null);

  const pickImage = async () => {
    try {
      const image = await ImagePicker.openPicker({
        width: 300,
        height: 400,
        cropping: true,
      });
      const croppedImage = await cropImage(image.path, {
        offset: { x: 0, y: 0 },
        size: { width: 200, height: 200 },
      });
      setImageUri(croppedImage);
    } catch (error) {
      console.log('Error picking image: ', error);
    }
  };

  return (
    <View>
      <Button title="选择并裁剪图片" onPress={pickImage} />
      {imageUri && <Image source={{ uri: imageUri }} style={{ width: 200, height: 200 }} />}
    </View>
  );
};

export default ImageCropExample;

免责申明：文章和图片全部来源于公开网络，如有侵权，请通知删除 server@dude6.com