Dbb-img-crop NPM

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

npm install dbb-img-crop --save

node>=10.13.0

效果预览

使用示例

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>
    );
  }
}

参数名字	参数说明
file	图片的File对象(必传)
handleSubmit	点击确定之后的回调函数:({file:Blob,event}) => {}
close	关闭整个弹出层的回调函数
title	弹出尘的标题，default：编辑图片
blockSize：{width：number, height：number}	裁剪框的尺寸，默认尺寸：width：222，height：296
cropSize：object	裁剪之后的照片回显样式，默认回显照: width：111，hegiht：148
rotate：boolean	是否开启旋转，default：false
wrapStyle：object	最外层容器的样式
leftStyle：object	左边容器的样式
scrollBar：boolean	是否显示滚动条，default：false
watermark：boolean	是否开启添加水印功能，defalut：false
watermarkStyle：object	添加水印的操作的样式
maxWatermarkSize：width,height	设置水印的最大宽高,不传则不限制
defaultWatermarkSize：width,height	设置水印的默认尺寸，defalut：50,50
accept：string	水印图片的类型，default："image/png, image/jpeg"