# react-cropping-image

**Repository Path**: ccvv22/react-cropping-image

## Basic Information

- **Project Name**: react-cropping-image
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-11-15
- **Last Updated**: 2023-11-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# react-cropping-image

前端通用图片裁剪组件 for react 16.8 +

# 安装 

```
npm install --save react-cropping-image
or
yarn add react-cropping-image
```

# 使用
```
import React, { useState } from "react";
import CroppingImage from 'react-cropping-image';
const App = () => {
    const cacheRef = React.createRef();
    const [src, setSrc] = useState(false);
    const imageSrc = 'https://github.com/dravenww/react-screenshot/blob/master/src/demo.jpeg?raw=true';
    const getImage = () => {
        let base = cacheRef.current.getImage();
        setSrc(base)
    }
    return (
        <div style={{ width: 640, margin: "15px auto" }}>
              <h1>Hello React</h1>
              <button onClick={getImage}>getImage</button>
              <section className="img-container">
                    <CroppingImage
                      image={imageSrc}
                      width={200}
                      height={200}
                      ref={cacheRef}
                    />
              </section>
              {src && <img src={src}/>}
        </div>
    );
}
```
# 参数

- image: 图片地址，src
- width: 裁剪所得图片宽度，默认200
- height: 裁剪所得图片高度，默认200

说明： 组件ScreenShot的宽高为所在容器的100%。

# 方法

- getImage: 获取用户裁剪后得图片，格式为base64的png类型。参见demo：[react-cropping-image](https://codesandbox.io/s/zealous-fast-rzg0t)