beantech-cropper

使用方法

npm install virsical-cropper
// or
yarn add virsical-cropper

import Cropper from 'virsical-cropper';
import 'virsical-cropper/lib/main.min.css';

<div>
  <Cropper btnText={'选择照片'} />
</div>

参数:

btnText

选择照片按钮文字
type:  string  |  默认值:  '选择照片'

infoText

提示信息文字
type:  string  || reactNode |  默认值:  '上传照片用于人脸识别开门或者签到'

uploadText

上传提示信息文字
type:  string  |  默认值:  '正在上传'

errorText

超出上传大小提示信息文字
type:  string  |  默认值:  '上传大小不能超过 10M'

maxSize

最大上传文件大小
type:  number  |  默认值:  10（M）

accept

支持上传图片格式
type:  string  |  默认值:  '.jpg, .jpeg, .png'

imgSrc

默认显示图片地址
type:  string  |  默认值:  ''

onChange

获取返回结果方法；参数为返回值
type:  function  |  默认值:   (e)=>{console.log(e)}

btnBackText

返回按钮文字
type:  string  |  默认值:  '返回'####

btnConfirmText

确认按钮文字
type:  string  |  默认值:  '确认'####

isMobile

是否为移动端
type:  boolean  |  默认值:  false####

loadingHandle

图片上传回调
type:  function  |  默认值:  无

loadingHandle(state){}

state 为 boolean，true 为正在上传，false 为结束上传

使用者在此方法里面，根据 PC 或者 App 调用正在上传组件，显示内容自己做国际化即可

maxSizeErrorHandle

图片超最大 size 回调
type:  function  |  默认值:  无   需配合 maxSize 一起使用####

maxSizeErrorHandle(size){}

size 为图片最大值，不能超过

使用者在此方法里面，根据 PC 或者 App 调用正错误提示组件，显示内容自己做国际化即可

needRotate<!-- slide -->

是否需要旋转
type:  boolean  |  默认值:  true

compress

图片压缩参数；参考地址
type:  object  |  默认值:  

{
  convertSize: 10000,
}

toDataURLtype

最终转换图片格式；参考地址
type:  string  |  默认值:  'image/jpeg'

minCropBoxWidth

参考地址
type:  number  |  默认值:  300

minCropBoxHeight

参考地址
type:  number  |  默认值:  300

width

参考地址
type:  number  |  默认值:  300

height

参考地址
type:  number  |  默认值:  300

cropperAngle

默认进行旋转；
type:  boolean  |  默认值:  false