# EyeCropper 
这个组件是用来做图片裁剪的，例如创意，智能配图那里，需要对图片做裁剪操作，这个组件只是按现有需求简单封装了一下，如果需要深度定制可以在这个基础上再开发。

## 基本使用方法
```javascript
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import EyeCropper from './components/EyeCropper';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      croppedImage: '',
      image: 'http://5b0988e595225.cdn.sohucs.com/images/20170823/25bc185f6559420bbf8e83edd07a0866.jpeg',
      options: {
        viewMode: 1,
        aspectRatio: 121/75,
        minCropBoxWidth: 121,
        minCropBoxHeight: 75,
        type: 0,  // 0: pc, 1: mobile,
      }
    }
  }

  getCropppedCanvas = () => {
    this.setState({
      croppedImage: this.cropper.getCroppedCanvas().toDataURL()
    })
  }

  toggleType = (type) => {
    this.setState({
      options: {
        type: type
      }
    })
  }

  changeImg = () => {
    this.setState({
      image: 'https://p.ssl.qhimg.com/dm/664_417_/t018b8900b6bb742c62.jpg'
    })
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <ul>
          <li><button onClick={this.toggleType.bind(this, 0)}>pc</button></li>
          <li><button onClick={this.toggleType.bind(this, 1)}>mobile</button></li>
          <li><button onClick={this.getCropppedCanvas}>get cropper</button></li>
          <li><button onClick={this.changeImg}>change image</button></li>
        </ul>
        <div style={{marginTop: 50}}>
          <EyeCropper
            ref={(cropper) => this.cropper = cropper}
            src={this.state.image}
            options={this.state.options}
            preview="preview"
          />
          <div>
            <div className="preview" style={{width: 200,height:150,overflow:'hidden'}}></div>
          </div>
          <div>
            <img src={this.state.croppedImage} alt=""/>
          </div>
        </div>
      </div>
    );
  }
}

export default App;
```
这个例子模拟了一下切换图片，每当src属性有变动的时候，会重新生成cropper的实例，只管调用即可。
这个cropper是在cropperjs的基础上进行封装的，具体的可以看看 [cropperjs](https://github.com/fengyuanchen/cropperjs)，考虑到现有业务，我简单封装了一下，已满足我们业务的需求。

## 属性说明

| 参数       | 说明            | 类型    | 可选值 | 默认值 |
| ---------- | -------------- | ------- | ----- | ----- |
| src    | 图片资源路径 | String    |   —   |   —  |
| preview | 预览容器，这里使用的是className， | String | — | — |
| options | 裁图插件配置，要更详细的配置项可以看一下插件的文档，我只是根据业务封装了一下，没有全部实现这个插件的一些方法 | String | — | — |
| style | 样式，可以直接写在行内，也可以给插件加一个className去写到css文件里边 | Object | — | — |

### options：配置项说明

| 参数       | 说明            | 类型    | 可选值 | 默认值 |
| ---------- | -------------- | ------- | ----- | ----- |
| viewMode | 裁剪模式，有四种模式，但是我们的业务只用到了第二种缩放模式，可选。 | Number | oneOf([0,1,2,3]) | 1 |
| aspectRatio | 裁剪框的比例，在我们的业务中PC是121:75，移动是1:1 | Number | — | — |
| minCropBoxWidth | 裁剪框的最小宽度，PC是121，移动是200 | — | — |
| minCropBoxHeight | 裁剪框的最小高度，PC是75，移动是200 | — | — |
| type | 这个字段表示的是PC还是移动，如果是PC就会将裁剪框的比例调整成PC的，移动就会调整成移动的，不需要自己手动去配置最小宽高 | — | — |