# tui-cropper 图片裁剪(圆形裁剪框) 会员组件
介绍
图片裁剪,组件提供了默认裁剪样式。裁剪框可设置为圆形和方形。
注意
- 找到组件中
rotateImg
属性默认使用的图片地址,将文件复制到自己项目中,也可自定义图片。 - 可拷贝static文件夹下整个components文件夹到自己项目中。
- 使用裁剪组件页面需要禁止回弹效果,可查看示例程序页面json文件的配置。
# 引入
# uni-app引入
第一种,手动引入(可全局引入)
import tuiCropper from "@/components/thorui/tui-cropper/tui-cropper.vue"
export default {
components:{
tuiCropper
}
}
第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)。
# uni-app版本平台差异说明
App-Nvue | App-vue | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|---|
升级中 | ✓ | ✓ | ✓ | 使用 tui-image-cropper 组件 | 使用 tui-image-cropper 组件 | 使用 tui-image-cropper 组件 | 使用 tui-image-cropper 组件 |
# 微信小程序引入(可在app.json中全局引入)
{
"usingComponents": {
"tui-cropper": "/components/thorui/tui-cropper/tui-cropper"
}
}
# 代码演示
部分功能演示,具体可参考示例程序以及文档API。
基础使用
通过 isRound
属性设置是否显示为圆形裁剪框, imageUrl
属性设置选取需要裁剪的图片地址,支持网络图片。
<template>
<view class="container">
<tui-cropper :isRound="isRound" :imageUrl="imageUrl" @ready="ready" @cropper="cropper"></tui-cropper>
<view class="tui-btn__box">
<view class="tui-btn__custom" @tap="chooseImage">选择图片</view>
<view class="tui-btn__custom" @tap="round">{{ roundText }}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
src: '',
imageUrl: '',
isRound: true,
roundText: '显示方形裁剪框'
};
},
onLoad(options) {
this.src = options.src || '';
this.src &&
uni.showLoading({
title: '请稍候...',
mask: true
});
},
methods: {
ready() {
this.imageUrl = this.src;
},
cropper(e) {
//裁剪完成后处理逻辑
uni.previewImage({
current: '',
urls: [e.url]
});
},
chooseImage() {
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: res => {
const tempFilePaths = res.tempFilePaths[0];
this.imageUrl = tempFilePaths;
}
});
},
round() {
this.isRound = !this.isRound;
this.roundText = this.isRound ? '显示方形裁剪框' : '显示圆形裁剪框';
}
}
};
</script>
<style>
.tui-btn__box {
position: fixed;
top: 120rpx;
z-index: 100;
color: #fff;
font-size: 28rpx;
display: inline-flex;
left: 50%;
transform: translateX(-50%);
}
.tui-btn__custom {
border: 1px solid #fff;
padding: 4px 8px;
white-space: nowrap;
}
.tui-btn__custom:first-child {
border-right: 0;
}
</style>
<view class="container">
<tui-cropper isRound="{{isRound}}" imageUrl="{{imageUrl}}" bindready="ready" bindcropper="cropper"></tui-cropper>
<view class="tui-btn__box">
<view class="tui-btn__custom" bindtap="chooseImage">选择图片</view>
<view class="tui-btn__custom" bindtap="round">{{ roundText }}</view>
</view>
</view>
// data 数据 及 方法
Page({
data: {
src: '',
imageUrl: '',
isRound: true,
roundText: '显示方形裁剪框'
},
onLoad: function (options) {
this.setData({
src:options.src || ''
})
this.data.src &&
wx.showLoading({
title: '请稍候...',
mask: true
});
},
ready() {
this.setData({
imageUrl:this.data.src
})
},
cropper(e) {
//裁剪完成后处理逻辑
wx.previewImage({
current: '',
urls: [e.detail.url]
});
},
chooseImage() {
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: res => {
this.setData({
imageUrl: res.tempFilePaths[0]
})
}
});
},
round() {
let isRound=this.data.isRound
this.setData({
roundText:isRound?'显示圆形裁剪框' : '显示方形裁剪框',
isRound:!isRound
})
}
})
.tui-btn__box {
position: fixed;
top: 120rpx;
z-index: 100;
color: #fff;
font-size: 28rpx;
display: inline-flex;
left: 50%;
transform: translateX(-50%);
}
.tui-btn__custom {
border: 1px solid #fff;
padding: 4px 8px;
white-space: nowrap;
}
.tui-btn__custom:first-child {
border-right: 0;
}
// Make sure to add code blocks to your code group
# Slots
插槽名称 | 插槽说明 |
---|---|
- | - |
# Props
属性名 | 类型 | 说明 | 默认值 |
---|---|---|---|
imageUrl | String | 图片路径 | - |
height | Number | 裁剪框高度 单位px | 280 |
width | Number | 裁剪框宽度 | 280 |
isRound | Boolean | 是否显示为圆形裁剪框 | true |
border | String | 裁剪框边框样式 | 1px solid #fff |
scaleRatio | Number | 生成的图片尺寸相对剪裁框的比例 | 2 |
quality | Number | 图片的质量,取值范围为 (0, 1],不在范围内时当作1.0处理 | 0.8 |
rotateAngle | Number | 图片旋转角度 | 0 |
minScale | Number | 图片最小缩放比 | 0.5 |
maxScale | Number | 图片最大缩放比 | 2 |
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
注:uni-app端绑定事件使用@前缀,如@end;微信小程序原生使用bind前缀,如bindend
事件名 | 说明 | 回调参数 |
---|---|---|
ready | 裁剪组件初始化完成 | { } |
imageLoad | 需要裁剪的图片加载完成 | { } |
cropper | 确认裁剪,回传裁剪后的图片url或base64 | { url:图片地址, base64:图片base64, width:宽度, height:高度 } |
# 预览
请以移动端效果为准,touch事件目前尚未在PC端做兼容。
# 特别说明
该组件为 会员组件
,非开源内容,需开通会员才可获取使用。
# 线上程序扫码预览
![]() | ![]() | ![]() |
---|---|---|
ThorUI组件库小程序码 | H5二维码 | ThorUI示例小程序码 |