ThorUI文档

# tui-cropper-app 图片裁剪

介绍

图片裁剪，组件提供了默认裁剪样式。可自定义操作栏，设置裁剪框宽高，边缘线颜色，锁定裁剪框大小等。

注意

  • 找到组件中 rotateImg 属性默认使用的图片地址，将文件复制到自己项目中，也可自定义图片。
  • 如果图片位置与组件同级，编译成小程序时图片会丢失。
  • 可拷贝static文件夹下整个components文件夹到自己项目中。
  • 使用裁剪组件页面需要禁止回弹效果，可查看示例程序页面json文件的配置。
  • 此组件为App端专用组件，解决部分android机 调用uni.canvasToTempFilePath出错的问题
  • 此组件使用5+ api裁剪，部分功能受限：1.请不要使用触摸旋转 2.旋转角度必须是90的正整数倍

# 引入

# uni-app引入

第一种，手动引入（可全局引入）

import tuiCropperApp from "@/components/thorui/tui-cropper-app/tui-cropper-app.vue"
export default {
	components:{
		tuiCropperApp
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看 官网文档 (opens new window)。

# uni-app版本平台差异说明

App-vue App-Nvue 其他端
√ 升级中 使用其他裁剪组件

# 微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-cropper-app": "/components/thorui/tui-cropper-app/tui-cropper-app"
  }
}

# 代码演示

部分功能演示，具体可参考示例程序以及文档API。

基础使用

通过 lockRatio 属性设置是否锁定裁剪框比例， imageUrl 属性设置选取需要裁剪的图片地址，支持网络图片。

<!--uni-app-->
<!-- #ifdef APP-PLUS -->
<tui-cropper-app lockRatio :imageUrl="imageUrl" @cropper="cropper"></tui-cropper-app>
<!-- #endif -->

<!--微信小程序 使用tui-picture-cropper组件-->
<tui-picture-cropper lockRatio imageUrl="{{imageUrl}}" bindcropper="cropper"></tui-picture-cropper>

# Slots

none

# Props

参数 类型 说明 默认值
imageUrl String 图片路径 -
height Number 裁剪框高度 单位px 280
width Number 裁剪框宽度 280
minWidth Number 裁剪框最小宽度 100
minHeight Number 裁剪框最小高度 100
maxWidth Number 裁剪框最大宽度 360
maxHeight Number 裁剪框最大高度 360
borderColor String 裁剪框border颜色 rgba(255,255,255,0.1)
edgeColor String 裁剪框边缘线颜色 #FFFFFF
edgeWidth String 裁剪框边缘线宽度 w=h 34rpx
edgeBorderWidth String 裁剪框边缘线border宽度 6rpx
edgeOffsets String 偏移距离，根据edgeBorderWidth进行调整 6rpx
lockWidth Boolean 裁剪框宽度锁定，如果宽度和高度都为true则裁剪框禁止拖动 false
lockHeight Boolean 裁剪框高度锁定 false
lockRatio Boolean 锁定裁剪框比例（放大或缩小） false
scaleRatio Number 生成的图片尺寸相对剪裁框的比例 2
quality Number 图片的质量，取值范围为 (0, 1]，不在范围内时当作1.0处理 0.8
rotateAngle Number 图片旋转角度，当前版本只能传90的倍数，否则可能导致裁剪失败或不正确 0
minScale Number 图片最小缩放比 0.5
maxScale Number 图片最大缩放比 2
disableRotate Boolean 是否禁用触摸旋转（为false则可以触摸转动图片，limitMove为false生效），此属性App端当前版本不可用，否则可能导致裁剪失败或不正确 true
limitMove Boolean 是否限制移动范围(剪裁框只能在图片内,为true不可触摸转动图片)，此属性当前版本不可传false，由于api不支持超出裁剪区域裁剪，所以只能限制在裁剪框内 true
custom Boolean 自定义操作栏（为true时隐藏底部操作栏） false
startCutting [Number,Boolean] 值发生改变开始裁剪（custom为true时生效） [Number,Boolean]
isBase64 Boolean 是否返回base64(H5端默认base64) false
loadding Boolean 裁剪时是否显示loadding true
rotateImg String 旋转icon地址 /static/components/
cropper/img_rotate.png

# Events

事件名 说明 回调参数
ready 裁剪组件初始化完成 { }
imageLoad 需要裁剪的图片加载完成 { }
cropper 确认裁剪，回传裁剪后的图片url或base64 {
  url:图片地址,
  base64:图片base64,
  width:宽度,
  height:高度
}

# 预览

请以移动端效果为准，touch事件目前尚未在PC端做兼容。

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码

← tui-cropper 图片裁剪（圆形裁剪框） →