dbb-img-crop

一款基于react-image-crop二次开发的，图片裁剪工具

npm install dbb-img-crop --save

node>=10.13.0

效果预览

裁剪demo

裁剪+水印

使用示例

import React, { Component } from 'react';
import ReactDOM from 'react-dom'; 
import ReactCrop from 'dbb-img-crop';

const blockSize = {
  width: 460,
  height: 590,
};
const cropSize = {
  width: 800,
  height: 600,
};

class App extends Component {
  state = {
    src: null,
  };

  onSelectFile = e => {
    if (e.target.files && e.target.files.length > 0) {
      this.setState({ src: e.target.files[0] });
    }
  };

	handleSubmit = ({file,event}) => {
    // 会返回一个对象,file参数就是一个Blob对象
   // 如果你使用antd的插件，传进来的File对象有name和uid字段,返回的Blob对象都会有这两个key-	value 
   //如果还需要回显，可以 img.src = new Blob(file)     
    conosle.log(file);  
  	};

  render() {
    const { src } = this.state;

    return (
      <div className="App">
        <h1>下面将开始测试</h1>
        <div>
          <input type="file" onInput={this.onSelectFile} />
        </div>
        {src && (
          <>
            <ReactCrop
              //locked={true}  true == 裁剪框不可以自定义尺寸
              //ruleOfThirds={true} true == 开启裁剪框九宫格
              file={src}
              handleSubmit={blob => {
                //设置照片回显
                const src = URL.createObjectURL(blob.file),
                  img = document.createElement('img');
                img.src = src;
                img.style.margin = '0 auto';
                img.style.display = 'block';
                document.body.appendChild(img);
                this.setState({ src: null });
              }}
              close={() => this.setState({ src: null })}
            />
          </>
        )}
      </div>
    );
  }
}