# 图片裁剪

Image Cropper:图片裁剪,组件提供了默认裁剪,可自定义操作栏。

# 组件结构

<template>
	<view class="tui-container" @touchmove.stop.prevent="stop">
		<view class="tui-image-cropper" @touchend="cutTouchEnd" @touchstart="cutTouchStart" @touchmove="cutTouchMove">
			<view class="tui-content">
				<view class="tui-content-top tui-bg-transparent" :style="{ height: cutY + 'px', transitionProperty: cutAnimation ? '' : 'background' }"></view>
				<view class="tui-content-middle" :style="{ height: canvasHeight + 'px' }">
					<view class="tui-bg-transparent" :style="{ width: cutX + 'px', transitionProperty: cutAnimation ? '' : 'background' }"></view>
					<view
						class="tui-cropper-box"
						:style="{ width: canvasWidth + 'px', height: canvasHeight + 'px', borderColor: borderColor, transitionProperty: cutAnimation ? '' : 'background' }"
					>
						<view
							v-for="(item, index) in 4"
							:key="index"
							class="tui-edge"
							:class="[`tui-${index < 2 ? 'top' : 'bottom'}-${index === 0 || index === 2 ? 'left' : 'right'}`]"
							:style="{
								width: edgeWidth,
								height: edgeWidth,
								borderColor: edgeColor,
								borderWidth: edgeBorderWidth,
								left: index === 0 || index === 2 ? `-${edgeOffsets}` : 'auto',
								right: index === 1 || index === 3 ? `-${edgeOffsets}` : 'auto',
								top: index < 2 ? `-${edgeOffsets}` : 'auto',
								bottom: index > 1 ? `-${edgeOffsets}` : 'auto'
							}"
						></view>
					</view>
					<view class="tui-flex-auto tui-bg-transparent" :style="{ transitionProperty: cutAnimation ? '' : 'background' }"></view>
				</view>
				<view class="tui-flex-auto tui-bg-transparent" :style="{ transitionProperty: cutAnimation ? '' : 'background' }"></view>
			</view>
			<image
				@load="imageLoad"
				@error="imageLoad"
				@touchstart="start"
				@touchmove="move"
				@touchend="end"
				:style="{
					width: imgWidth ? imgWidth + 'px' : 'auto',
					height: imgHeight ? imgHeight + 'px' : 'auto',
					transform: imgTransform,
					transitionDuration: (cutAnimation ? 0.35 : 0) + 's'
				}"
				class="tui-cropper-image"
				:src="imageUrl"
				v-if="imageUrl"
				mode="widthFix"
			></image>
		</view>
		<canvas
			canvas-id="tui-image-cropper"
			id="tui-image-cropper"
			:disable-scroll="true"
			:style="{ width: CROPPER_WIDTH * scaleRatio + 'px', height: CROPPER_HEIGHT * scaleRatio + 'px' }"
			class="tui-cropper-canvas"
		></canvas>
		<view class="tui-cropper-tabbar" v-if="!custom">
			<view class="tui-op-btn" @tap.stop="back">取消</view>
			<image :src="rotateImg" class="tui-rotate-img" @tap="setAngle"></image>
			<view class="tui-op-btn" @tap.stop="getImage">完成</view>
		</view>
	</view>
</template>

# 组件脚本

<script>
	export default {
		name: 'tuiImageCropper',
		
		...省略n行
		
	}
</script>

# 组件样式

... 此处省略n行

# 脚本说明

# 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 生成的图片尺寸相对剪裁框的比例 3
quality Number 图片的质量,取值范围为 (0, 1],不在范围内时当作1.0处理 1
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

# methods

名称 描述
@ready 裁剪页面初始化完成
@imageLoad 需要裁剪的图片加载完成
@cropper 裁剪回传图片地址或base64

# 示例

# H5预览地址

https://www.thorui.cn/h5/#/pages/extend/cropper/cropper

# H5二维码

# 小程序二维码