# tui-picture-cropper 图片裁剪开源组件

介绍

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

特别说明

此组件为wxs版本，仅App-vue，H5，微信小程序中使用，其他小程序如百度/支付宝/字节/QQ 等小程序请使用 tui-image-cropper 组件。

App端单独提供了裁剪组件 tui-cropper-app，使用了5+ API进行裁剪。

新版与旧版组件的API使用方法一致。

注意

找到组件中 rotateImg 属性默认使用的图片地址，将文件复制到自己项目中，也可自定义图片。
如果图片位置与组件同级，编译成小程序时图片会丢失。
可拷贝static文件夹下整个components文件夹到自己项目中。
使用裁剪组件页面需要禁止回弹效果，可查看示例程序页面json文件的配置。

# 引入

# uni-app引入

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

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

第二种，开启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-picture-cropper": "/components/thorui/tui-picture-cropper/tui-picture-cropper"
  }
}

# 代码演示

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

基础使用

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

<!--uni-app-->
<tui-picture-cropper lockRatio :imageUrl="imageUrl" @ready="ready" @cropper="cropper"></tui-picture-cropper>

// data 数据 及 方法
export default {
 data() {
 	return {
 		src: '',
 		imageUrl: '' //要裁剪的图片
 	}
 },
 onLoad(options) {
 	this.src = options.src || '';
 	//如果从上个页面传值时可显示loading
 	this.src &&
 		uni.showLoading({
 			title: '请稍候...',
 			mask: true
 		});
 },
 methods: {
 	ready() {
 		this.imageUrl = this.src;
 	},
 	cropper(e) {
 		//裁剪完成后处理逻辑
 		if(e.url){
 			uni.previewImage({
 				current: '', // 当前显示图片的http链接
 				urls: [e.url] // 需要预览的图片http链接列表
 			});
 		}else{
 			console.log(e.base64)
 			console.log('裁剪成功！查看控制台打印')
 		}
 	}
 }
}

<!--微信小程序-->
<tui-picture-cropper lockRatio imageUrl="{{imageUrl}}" bindready="ready" 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	图片旋转角度	0
minScale	Number	图片最小缩放比	0.5
maxScale	Number	图片最大缩放比	2
disableRotate	Boolean	是否禁用触摸旋转（为false则可以触摸转动图片，limitMove为false生效）	true
limitMove	Boolean	是否限制移动范围(剪裁框只能在图片内,为true不可触摸转动图片)	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:高度 }