virsical-cropper2 v2.0.13

使用方法

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

  // 选择文件模式, all 为全部, camera 为相机
  selectType: PropTypes.oneOfType(['all','camera']),

选择文件模式,； type:  枚举  |  默认值:  all

  // 删除回调
  onDelete: PropTypes.func,

删除回调 ； type:  function  |  默认值:  false

  // 删除按钮文字
  btnDelText: PropTypes.string,

删除按钮文字； type:  String  |  默认值:  删除