react-cuting v1.0.2

需要使用外层容器包裹并设置宽高

react-cuting

一个简单易用的图片react裁剪插件

install

npm install react-cuting

yarn add react-cuting

use

import { Cuting } from 'react-cuting'

文档

<Cuting ref={CutingRef} />

react-cuting

内置方法 通过refs 调用

示例

const App = () => {
  const [bool,change] = useState(false)

  const CutingRef = useRef()
  const hanldClick = () => {
    CutingRef.current.import()
  }
  const hanldClear = () => {
    CutingRef.current.clear()
  }

  const changeInput = (info) => {
    console.log(info)
  }

  const hanldBase = () => {
    CutingRef.current.getBase((data) => {
      console.log(data)
    })
  }

  const hanldBlob = () => {
    console.log(CutingRef.current.getBlob())
  }

  return(
    <div style={{height: '600px'}}>
      <Cuting
        ref={CutingRef}
        size={[1000, 2000]}
        enlarge={1}
        canMoveBox={true}
        changeSize={true}
        info
        fixed={bool}
        outputType="gif"
        src="http://p1.music.126.net/LqeJALMTGSzFcXosVoMRhg==/109951166060177875.jpg"
        outputSize={0.5}
        onChange={changeInput}
      />
      <div onClick={()=>change(!bool)}>点我</div>
      <div className="btn" onClick={hanldClick}>触发canvas</div>
      <div className="btn" onClick={hanldClear}>清空</div>
      <div className="btn" onClick={hanldBase}>获取base64</div>
      <div className="btn" onClick={hanldBlob}>获取blob</div>
    </div>
  )
}

功能增加和bug请提交issues