1.0.5 • Published 2 years ago

taro-cropper-v3 v1.0.5

Weekly downloads
-
License
MIT
Repository
-
Last release
2 years ago

npm.io npm.io npm.io

taro-cropper

项目地址: https://github.com/Przeblysk/taro-cropper

fork from: https://github.com/SunnyQjm/taro-cropper

TaroCropper 是Taro小程序框架下使用的图片裁剪,基于canvasAPI进行实现,支持滑动和缩放,目前测试在微信小程序端, QQ小程序端, 支付宝小程序端, 字节跳动小程序端, 百度小程序端和H5端可以正常使用。

使用方式

  • 首先用npm安装

    npm install --save taro-cropper
  • 引入组件库

    import {
      TaroCropper
    } from 'taro-cropper';
  • 在项目配置文件 config/index.js 中添加如下配置

    h5: {
        esnextModules: ['taro-cropper']
    }

    该配置的作用是,在H5端使用本库的时候,对应的单位会进行转换(px => rem

  • 在代码中使用

    <TaroCropper
      fullScreen
      onCut={res => {
           this.setState({
           cutImagePath: res
          })
      }}
    />

    具体的使用实例参考taro-cropper-demo

参数说明

参数名参数类型参数说明默认值
cropperCanvasIdstring用于绘制的Canvas的idcropperCanvasId
cropperCutCanvasIdstring用于裁剪的Canvas的idcropperCutCanvasId
widthnumber整个控件的宽度(单位为rpx)750(即充满屏幕宽度)
heightnumber整个控件的高度(单位为rpx)1200
cropperWidthnumber裁剪框的宽度(单位为rpx)400
cropperHeightnumber裁剪框的高度(单位为rpx)400
themeColorstring主题色(裁剪框四角的颜色以及底部完成按钮的颜色)#0f0(绿色)
maxScalenumber最大放大倍数(maxScale > 1)3
fullScreenboolean控件是否充满全屏false
srcstring待裁剪的图片的路径‘’
hideFinishTextboolean是否隐藏底部的完成按钮false
onCut(cutImagePath: string) => void点击底部完成按钮时会执行裁剪操作,可以通过此回调接收裁剪结果() => {}
onFail(err) => void裁剪失败的回调() => {}
hideCancelTextboolean是否隐藏取消按钮true
onCancel() => void点击取消按钮的回调() => {}
finishTextstring完成按钮文字完成
cancelTextstring取消按钮文字取消
fileType'jpg' | 'png' | string裁剪后导出的图片的格式,只支持 'jpg' 或 'png''jpg'
qualitynumber导出图片的质量,取值为 0 ~ 1(1表示质量最高)1

效果展示

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago