# PhotoEditor 图片编辑器

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/photo-editor/freepass)
- 平台：PC
- 维护者：屈正巍
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[PhotoEditor]

## 代码演示

### 编辑图片(固定高度)

可以实现对图片的预览和编辑功能

```jsx
import { PureComponent } from 'react';
import { PhotoEditor, constants, } from '@weapp/ui';

const prefixCls = `${constants.uiPcClsPrefix}-demo-photo-editor`;

interface State {
  src: string
}

export default class PhotoViewDemo extends PureComponent<{}, State> {

  state = {
    src: '/build/ui/demo/assets/photo-view/1.jpg'
  }

  onPhotoEditorChange = (value: string) => {
    console.info('value', value)
  }

  render() {
    const { src } = this.state
    return (
      <div className={prefixCls}>
        <h3>高度400，宽度自适应</h3>
        <PhotoEditor
         
          src={src}
          height={400}
          onChange={this.onPhotoEditorChange}
        />
      </div>
    )
  }
}
```

### 受控(固定高度)

可以实现对图片的预览和编辑功能

```jsx
import { PureComponent } from 'react';
import { PhotoEditor, constants, } from '@weapp/ui';

const prefixCls = `${constants.uiPcClsPrefix}-demo-photo-editor`;

interface State {
  src: string
}

export default class PhotoViewDemo extends PureComponent<{}, State> {

  state = {
    src: '/build/ui/demo/assets/photo-view/1.jpg'
  }

  onPhotoEditorChange = (value: string) => {
    console.info('value', value)
    this.setState({ src: value })
  }

  render() {
    const { src } = this.state
    return (
      <div className={prefixCls}>
        <h3>高度400，宽度自适应</h3>
        <PhotoEditor
         
          src={src}
          height={400}
          onChange={this.onPhotoEditorChange}
        />
      </div>
    )
  }
}
```

### 编辑图片(固定宽高)

可以实现对图片的预览和编辑功能

```jsx
import { PureComponent } from 'react';
import { PhotoEditor, constants, } from '@weapp/ui';

const prefixCls = `${constants.uiPcClsPrefix}-demo-photo-editor`;

interface State {
  src: string
}

export default class PhotoViewDemo extends PureComponent<{}, State> {

  state = {
    src: '/build/ui/demo/assets/photo-view/1.jpg'
  }

  onPhotoEditorChange = (value: string) => {
    console.log('value', value)
    this.setState({ src: value })
  }

  render() {
    const { src } = this.state
    return (
      <div className={prefixCls} >
        <h3>高度200，宽度300</h3>
        <PhotoEditor
          src={src}
          height={200}
          width={300}
          onChange={this.onPhotoEditorChange}
        />
      </div>
    )
  }
}
```

### 自适应容器大小

自适应容器大小

```jsx
import { PureComponent } from 'react';
import { Input, PhotoEditor, constants, } from '@weapp/ui';

const prefixCls = `${constants.uiPcClsPrefix}-demo-photo-editor`;

interface State {
  src: string
  height: string
}

export default class PhotoViewDemo extends PureComponent<{}, State> {

  state = {
    src: '/build/ui/demo/assets/photo-view/1.jpg',
    height: '300',
  }

  onPhotoEditorChange = (value: string) => {
    console.log('value', value)
    this.setState({ src: value })
  }

  onInputChange = (value: any) => {
    this.setState({ height: value })
  }

  render() {
    const { src, height } = this.state
    return (
      <div className={prefixCls} >
        <div style={{ display: 'flex', alignItems: 'center', minHeight: 30 }}>
          <span>请输入高度：</span>
          <Input onChange={this.onInputChange} />
        </div>
        <PhotoEditor
          src={src}
          height={Number(height)}
          onChange={this.onPhotoEditorChange}
        />
      </div>
    )
  }
}
```

## API

### 参数说明：

其余参数可以参考：[https://github.com/fengyuanchen/cropperjs](https://github.com/fengyuanchen/cropperjs)

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| src | 用于裁切的图片地址 | string | 是 |  |
| fileId | 下载接口的fileId | string | 否 |  |
| onChange | 点击裁切抛出的事件 | (data: string, src?: string) | 否 |  |
| loginFree | 下载是否走免登录 | boolean | 否 |  |
| module | 下载接口模块参数 | string | 否 |  |
| downloadParams | 用于走下载接口的其他参数 | any | 否 |  |
| downloadSrc | 单独用于下载的src | string | 否 |  |
| width | 图片宽度(默认为100%) | number | 否 | 100% |
| height | 图片高度(默认为100%) | number | 否 | 100% |
| loadingElement | 加载失败的element | JSX.Element | 否 |  |
| brokenElement | 加载中的element | ((photoProps: brokenElementDataType) => JSX.Element) | 否 |  |
| canRotate | 是否可旋转 | boolean | 否 | true |
| canScale | 是否可调节大小 | boolean | 否 | true |
| hideEnlarge | 是否隐藏放大按钮 | boolean | 否 |  |
| hideShrink | 是否隐藏缩小按钮 | boolean | 否 |  |
| hideAntiRotate | 是否隐藏左旋转按钮 | boolean | 否 |  |
| hideRotate | 是否隐藏右旋转按钮 | boolean | 否 |  |
| hideDownload | 是否隐藏下载按钮 | boolean | 否 |  |
| hideEdit | 是否隐藏编辑按钮 | boolean | 否 |  |
| hideRest | 是否隐藏重置按钮 | boolean | 否 |  |
| customDownload | 自定义下载方法 | (data: string, src?: string) | 否 |  |
| customToolBar | 自定义渲染工具栏 | React.ReactNode | 否 |  |
| cropperOption | CropperJs配置项 | Cropper.Options | 否 |  |
| wheelScale | 鼠标滚动是否能改变图片大小 | boolean | 否 |  |
