# 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 属性设置选取需要裁剪的图片地址，支持网络图片。

<template>
 <view class="container">
 	<!-- #ifdef APP-PLUS -->
 	<!--App端专用组件，解决部分android机 调用uni.canvasToTempFilePath出错的问题-->
 	<!--App端使用5+ api裁剪，部分功能受限：1.请不要使用触摸旋转 2.旋转角度必须是90的正整数倍-->
 	<tui-cropper-app :lockRatio="true" :imageUrl="imageUrl" @cropper="cropper"></tui-cropper-app>
 	<!-- #endif -->

 	<!-- #ifndef APP-PLUS -->
 	<tui-picture-cropper :lockRatio="true" :imageUrl="imageUrl" @cropper="cropper"></tui-picture-cropper>
 	<!-- #endif -->

 	<tui-modal :show="modal" title="请选择图片" content="组件默认使用,图片可由上个页面传入" @click="chooseImage"></tui-modal>
 </view>
</template>

<script>
 export default {
 	data() {
 		return {
 			modal: true,
 			imageUrl: '' //要裁剪的图片
 		};
 	},
 	methods: {
 		cropper(e) {
 			//裁剪完成后处理逻辑
 			uni.previewImage({
 				current: '', // 当前显示图片的http链接
 				urls: [e.url] // 需要预览的图片http链接列表
 			});
 		},
 		chooseImage(e) {
 			let index = Number(e.index);
 			if (index == 0) {
 				uni.navigateBack();
 			} else {
 				uni.chooseImage({
 					count: 1,
 					sizeType: ['original', 'compressed'],
 					sourceType: ['album', 'camera'],
 					success: res => {
 						const tempFilePaths = res.tempFilePaths[0];
 						this.imageUrl = tempFilePaths;
 						this.modal = false;
 					}
 				});
 			}
 		}
 	}
 };
</script>

<style></style>

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

// data 数据 及 方法
Page({
  data: {
    src: '',
    imageUrl: '' //要裁剪的图片
  },
  
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
      this.setData({
        src: options.src || 'https://thorui.cn/images/mall/banner/1.jpg'
      }, () => {
        //如果从上个页面传值时可显示loading
        this.data.src && wx.showLoading({
          title: '请稍候...',
          mask: true
        });
      })
  
    },
    ready() {
      this.setData({
        imageUrl: this.data.src
      })
    },
    cropper(e) {
      //裁剪完成后处理逻辑
      if(e.detail.url){
        wx.previewImage({
          urls: [e.detail.url] // 需要预览的图片http链接列表
        });
      }else{
        console.log(e.detail.base64)
        wx.showToast({
          title: '裁剪成功！查看控制台打印',
          icon:'none'
        })
      }
    }
})

// Make sure to add code blocks to your code group

# Slots

插槽名称	插槽说明
-	-

# 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

注：uni-app端绑定事件使用@前缀，如@ready；微信小程序原生使用bind前缀，如bindready

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