npm 包 @ebizon/react-native-advance-image-cropper 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在 React Native 开发中，图片裁剪是一个常见需求，在 npm 包中，有许多 React Native 图片裁剪库可供使用。但是，在所有的图像裁剪器中，@ebizon/react-native-advance-image-cropper 是其中一个功能最丰富和最适合定制化的类库。

安装

要安装 @ebizon/react-native-advance-image-cropper , 你可以通过运行以下命令来完成：

npm install @ebizon/react-native-advance-image-cropper

使用

裁剪器属性

首先，让我们看一下 ImageCropper 的属性，以及它们的功能：

属性名	类型	描述
`imageUri`	`string`	用于定义当前图像的源 URL 或 URI
`cropAreaWidth`	`number`	定义裁剪区域的宽度
`cropAreaHeight`	`number`	定义裁剪区域的高度
`initialOffsetX`	`number`	定义裁剪器水平（x）方向的初始偏移量
`initialOffsetY`	`number`	定义裁剪器垂直方向（y）的初始偏移量
`minZoom`	`number`	用于指定最小变焦水平
`maxZoom`	`number`	用于指定最大变焦水平
`overlayColor`	`string`	定义覆盖在图像上的颜色。默认为 rgba（0，0，0，0.5）
`overlayStrokeWidth`	`number`	定义覆盖在图像上的描边宽度。默认为5
`cropShape`	`string`	定义裁剪器的形状。可选值为“矩形”或“圆形”。默认为“矩形”。
`onTransformDataChange`	`function`	当图像被移动，变焦或调整大小时调用的回调函数。这允许你在变换图像操作之前获取对数据的对应。

示例代码

这是如何使用 @ebizon/react-native-advance-image-cropper 在 React Native 中进行图片裁剪的示例代码：

import React from 'react';
import { View, Image } from 'react-native';
import ImageCropper from '@ebizon/react-native-advance-image-cropper';

class ImageEditor extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      imageUri: 'https://url/to/image.jpg',
      cropAreaWidth: 400,
      cropAreaHeight: 400,
      initialOffsetX: 0,
      initialOffsetY: 0,
      maxZoom: 1,
      minZoom: 0,
      overlayColor: 'rgba(0, 0, 0, 0.5)',
      overlayStrokeWidth: 5,
      cropShape: 'rect'
    }
  }

  render() {
    const {
      imageUri,
      cropAreaWidth,
      cropAreaHeight,
      initialOffsetX,
      initialOffsetY,
      maxZoom,
      minZoom,
      overlayColor,
      overlayStrokeWidth,
      cropShape } = this.state;

    return (
      <View>
        <ImageCropper
          cropAreaWidth={ cropAreaWidth }
          cropAreaHeight={ cropAreaHeight }
          imageUri={ imageUri }
          initialOffsetX={ initialOffsetX }
          initialOffsetY={ initialOffsetY }
          maxZoom={ maxZoom }
          minZoom={ minZoom }
          overlayColor={ overlayColor }
          overlayStrokeWidth={ overlayStrokeWidth }
          cropShape={ cropShape }
          onTransformDataChange={ data => {
            console.log(data);
          } }
        />
      </View>
    );
  }
}

export default ImageEditor;

在 ImageEditor 组件中，我们传递了 ImageCropper 所需的所有属性。此外，我们还添加了 onTransformDataChange 回调函数以在用户操作后获取对数据的修改。

现在，您已经可以从 npm i @ebizon/react-native-advance-image-cropper 中下载 @ebizon/react-native-advance-image-cropper 并使用它来进行图像编辑、调整和裁剪了。这个库非常灵活，可以根据您的特定需求进行调整，同时也提供了详细的文档和示例代码，使您能够更快地上手和了解这个库。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/600673dffb81d47349e53c9b