# 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示例小程序码 |