# 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示例
    ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码
    Last Updated: 7/21/2023, 2:12:46 PM