virsical-cropper

virsical-cropper

Usage no npm install needed!

<script type="module">
  import virsicalCropper from 'https://cdn.skypack.dev/virsical-cropper';
</script>

README

使用方法

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