npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

virsical-cropper2

v2.0.13

Published

virsical-cropper2

Downloads

6

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

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

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

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

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

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

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