uview-ultra 4.5.46

package/components/up-cropper/up-cropper.uvue

@@ -0,0 +1,899 @@
+<template>
+	<view class="up-cropper">
+		<view v-if="visible" class="up-cropper__panel">
+			<canvas
+				class="up-cropper__canvas"
+				:id="canvasId"
+				:canvas-id="canvasId"
+				:style="canvasStyle"
+				@touchstart="touchStart"
+				@touchmove="touchMove"
+				@touchend="touchEnd"
+				@touchcancel="touchEnd"
+			></canvas>
+			<canvas
+				class="up-cropper__export"
+				:id="exportCanvasId"
+				:canvas-id="exportCanvasId"
+				:style="exportCanvasStyle"
+			></canvas>
+			<view class="up-cropper__toolbar">
+				<template v-if="!previewing">
+					<text class="up-cropper__button" @click="select">重选</text>
+					<text class="up-cropper__button" @click="close">关闭</text>
+					<text v-if="showRotateButton" class="up-cropper__button" @click="rotate">旋转</text>
+					<text class="up-cropper__button" @click="preview">预览</text>
+					<text class="up-cropper__button" @click="confirm">确定</text>
+				</template>
+				<template v-else>
+					<text class="up-cropper__button" @click="exitPreview">返回</text>
+					<text class="up-cropper__button" @click="confirm">确定</text>
+				</template>
+			</view>
+		</view>
+		<view v-else @click="openDefault">
+			<slot></slot>
+		</view>
+	</view>
+</template>
+
+<script setup lang="uts">
+import { computed, getCurrentInstance, nextTick, ref } from 'vue'
+
+type CropTouch = {
+	x: number,
+	y: number
+}
+
+function makeId(prefix: string): string {
+	return prefix + Date.now().toString()
+}
+
+function toObject(value: any | null): UTSJSONObject {
+	return value == null ? ({} as UTSJSONObject) : value as UTSJSONObject
+}
+
+function normalizeString(value: any | null, fallback: string = ''): string {
+	return value == null ? fallback : value.toString()
+}
+
+function rpxToPx(value: any | null, fallback: number): number {
+	if (typeof value === 'number') {
+		return value
+	}
+	if (value == null) {
+		return fallback
+	}
+	const text = value.toString()
+	if (text.endsWith('rpx')) {
+		const parsed = parseFloat(text.substring(0, text.length - 3))
+		return isNaN(parsed) ? fallback : parsed * uni.getWindowInfo().windowWidth / 750
+	}
+	if (text.endsWith('px')) {
+		const parsed = parseFloat(text.substring(0, text.length - 2))
+		return isNaN(parsed) ? fallback : parsed
+	}
+	const parsed = parseFloat(text)
+	return isNaN(parsed) ? fallback : parsed
+}
+
+function numberValue(value: any | null, fallback: number = 0): number {
+	if (typeof value === 'number') {
+		return value
+	}
+	if (value == null) {
+		return fallback
+	}
+	const parsed = parseFloat(value.toString())
+	return isNaN(parsed) ? fallback : parsed
+}
+
+function touchPoint(e: UniTouchEvent): CropTouch {
+	let x = 0
+	let y = 0
+	if (e.touches.length > 0) {
+		x = e.touches[0].pageX
+		y = e.touches[0].pageY
+	} else if (e.changedTouches.length > 0) {
+		x = e.changedTouches[0].pageX
+		y = e.changedTouches[0].pageY
+	}
+	return { x, y } as CropTouch
+}
+
+function touchAt(e: UniTouchEvent, index: number): CropTouch | null {
+	if (e.touches.length > index) {
+		return {
+			x: e.touches[index].pageX,
+			y: e.touches[index].pageY
+		} as CropTouch
+	}
+	return null
+}
+
+function distanceBetween(a: CropTouch, b: CropTouch): number {
+	const x = a.x - b.x
+	const y = a.y - b.y
+	return Math.sqrt(x * x + y * y)
+}
+
+function clamp(value: number, min: number, max: number): number {
+	if (value < min) return min
+	if (value > max) return max
+	return value
+}
+
+defineOptions({
+	styleIsolation: 'app-and-page',
+	name: 'up-cropper'
+})
+
+const props = defineProps({
+	minScale: {
+		type: [String, Number],
+		default: 0.3
+	},
+	maxScale: {
+		type: [String, Number],
+		default: 4
+	},
+	canScale: {
+		type: Boolean,
+		default: true
+	},
+	canRotate: {
+		type: Boolean,
+		default: true
+	},
+	lockWidth: {
+		type: [String, Number],
+		default: ''
+	},
+	lockHeight: {
+		type: [String, Number],
+		default: ''
+	},
+	stretch: {
+		type: String,
+		default: ''
+	},
+	lock: {
+		type: String,
+		default: ''
+	},
+	noTab: {
+		type: Boolean,
+		default: true
+	},
+	inner: {
+		type: Boolean,
+		default: false
+	},
+	quality: {
+		type: [String, Number],
+		default: 1
+	},
+	canChangeSize: {
+		type: Boolean,
+		default: false
+	},
+	areaWidth: {
+		type: String,
+		default: '300rpx'
+	},
+	areaHeight: {
+		type: String,
+		default: '300rpx'
+	},
+	exportWidth: {
+		type: String,
+		default: '260rpx'
+	},
+	exportHeight: {
+		type: String,
+		default: '260rpx'
+	},
+	fillColor: {
+		type: String,
+		default: 'transparent'
+	},
+	index: {
+		type: [String, Number],
+		default: 0
+	}
+})
+
+const emit = defineEmits(['avtinit', 'confirm', 'cancel', 'error'])
+const instance = getCurrentInstance()!.proxy!
+
+const canvasId = ref(makeId('up-cropper-'))
+const exportCanvasId = ref(makeId('up-cropper-export-'))
+const canvasContext = ref<CanvasContext | null>(null)
+const exportCanvasContext = ref<CanvasContext | null>(null)
+const ctx = ref<CanvasRenderingContext2D | null>(null)
+const exportCtx = ref<CanvasRenderingContext2D | null>(null)
+// #ifdef APP-ANDROID
+const imageElement = ref<UniImageElementImpl | null>(null)
+// #endif
+// #ifndef APP-ANDROID
+const imageElement = ref<any | null>(null)
+// #endif
+const imagePath = ref('')
+const imageWidth = ref(0)
+const imageHeight = ref(0)
+const visible = ref(false)
+const canvasWidth = ref(uni.getWindowInfo().windowWidth)
+const canvasHeight = ref(uni.getWindowInfo().windowHeight - 70)
+const cropWidth = ref(rpxToPx(props.areaWidth, 300))
+const cropHeight = ref(rpxToPx(props.areaHeight, 300))
+const outputWidth = ref(rpxToPx(props.exportWidth, 260))
+const outputHeight = ref(rpxToPx(props.exportHeight, 260))
+const imageX = ref(0)
+const imageY = ref(0)
+const baseDisplayWidth = ref(0)
+const baseDisplayHeight = ref(0)
+const displayWidth = ref(0)
+const displayHeight = ref(0)
+const scaleValue = ref(1)
+const minScaleValue = ref(numberValue(props.minScale, 0.3))
+const maxScaleValue = ref(numberValue(props.maxScale, 4))
+const rotateDeg = ref(0)
+const canScaleLocal = ref(props.canScale)
+const canRotateLocal = ref(props.canRotate && !props.inner)
+const canChangeSizeLocal = ref(props.canChangeSize)
+const lockMode = ref(normalizeString(props.lock))
+const stretchMode = ref(normalizeString(props.stretch))
+const innerMode = ref(props.inner)
+const returnData = ref<any | null>(null)
+const lastOptions = ref({} as UTSJSONObject)
+const activeTouch = ref<CropTouch | null>(null)
+const secondTouch = ref<CropTouch | null>(null)
+const startPinchDistance = ref(0)
+const startScaleValue = ref(1)
+const resizeHandle = ref('')
+const previewing = ref(false)
+const currentIndex = ref(0)
+
+const canvasStyle = computed((): UTSJSONObject => {
+	return {
+		width: canvasWidth.value.toString() + 'px',
+		height: canvasHeight.value.toString() + 'px'
+	} as UTSJSONObject
+})
+
+const exportCanvasStyle = computed((): UTSJSONObject => {
+	return {
+		width: outputWidth.value.toString() + 'px',
+		height: outputHeight.value.toString() + 'px'
+	} as UTSJSONObject
+})
+
+const cropLeft = computed((): number => {
+	return (numberValue(canvasWidth.value, 0) - numberValue(cropWidth.value, 0)) / 2
+})
+
+const cropTop = computed((): number => {
+	return (numberValue(canvasHeight.value, 0) - numberValue(cropHeight.value, 0)) / 2
+})
+
+const showRotateButton = computed((): boolean => {
+	return canRotateLocal.value as boolean
+})
+
+const initCanvas = (): Promise<void> => {
+	return new Promise((resolve, reject) => {
+		uni.createCanvasContextAsync({
+			id: canvasId.value.toString() as string.IDString,
+			component: instance,
+			success: (context: CanvasContext) => {
+				canvasContext.value = context
+				ctx.value = context.getContext('2d')
+				uni.createCanvasContextAsync({
+					id: exportCanvasId.value.toString() as string.IDString,
+					component: instance,
+					success: (exportContext: CanvasContext) => {
+						exportCanvasContext.value = exportContext
+						exportCtx.value = exportContext.getContext('2d')
+						resolve()
+					},
+					fail: (error: UniError) => {
+						reject(error)
+					}
+				})
+			},
+			fail: (error: UniError) => {
+				reject(error)
+			}
+		})
+	})
+}
+
+const drawHandle = (context: CanvasRenderingContext2D, x: number, y: number, size: number): void => {
+	context.fillRect(x - size / 2, y - size / 2, size, size)
+	context.strokeRect(x - size / 2, y - size / 2, size, size)
+}
+
+const drawResizeHandles = (context: CanvasRenderingContext2D, left: number, top: number, width: number, height: number): void => {
+	const size = 12
+	context.fillStyle = '#ffffff'
+	context.strokeStyle = '#d14343'
+	context.lineWidth = 1
+	drawHandle(context, left, top, size)
+	drawHandle(context, left + width, top, size)
+	drawHandle(context, left, top + height, size)
+	drawHandle(context, left + width, top + height, size)
+}
+
+const keepImageInCrop = (): void => {
+	const cropL = cropLeft.value
+	const cropT = cropTop.value
+	const cropW = numberValue(cropWidth.value, 0)
+	const cropH = numberValue(cropHeight.value, 0)
+	const displayW = numberValue(displayWidth.value, 0)
+	const displayH = numberValue(displayHeight.value, 0)
+	if (displayW <= cropW) {
+		imageX.value = cropL + (cropW - displayW) / 2
+	} else {
+		if (numberValue(imageX.value, 0) > cropL) {
+			imageX.value = cropL
+		}
+		if (numberValue(imageX.value, 0) + displayW < cropL + cropW) {
+			imageX.value = cropL + cropW - displayW
+		}
+	}
+	if (displayH <= cropH) {
+		imageY.value = cropT + (cropH - displayH) / 2
+	} else {
+		if (numberValue(imageY.value, 0) > cropT) {
+			imageY.value = cropT
+		}
+		if (numberValue(imageY.value, 0) + displayH < cropT + cropH) {
+			imageY.value = cropT + cropH - displayH
+		}
+	}
+}
+
+const draw = (): void => {
+	const context = ctx.value
+	const image = imageElement.value
+	if (context == null || image == null) {
+		return
+	}
+	const canvasW = numberValue(canvasWidth.value, 0)
+	const canvasH = numberValue(canvasHeight.value, 0)
+	const cropL = cropLeft.value
+	const cropT = cropTop.value
+	const cropW = numberValue(cropWidth.value, 0)
+	const cropH = numberValue(cropHeight.value, 0)
+	const imageXLocal = numberValue(imageX.value, 0)
+	const imageYLocal = numberValue(imageY.value, 0)
+	const displayW = numberValue(displayWidth.value, 0)
+	const displayH = numberValue(displayHeight.value, 0)
+	context.clearRect(0, 0, canvasW, canvasH)
+	context.fillStyle = 'rgba(0,0,0,0.72)'
+	context.fillRect(0, 0, canvasW, canvasH)
+	context.save()
+	context.beginPath()
+	context.rect(cropL, cropT, cropW, cropH)
+	context.clip()
+	context.fillStyle = props.fillColor
+	context.fillRect(cropL, cropT, cropW, cropH)
+	context.translate(imageXLocal + displayW / 2, imageYLocal + displayH / 2)
+	context.rotate(rotateDeg.value * Math.PI / 180)
+	context.drawImage(image, -displayW / 2, -displayH / 2, displayW, displayH)
+	context.restore()
+	context.strokeStyle = '#ffffff'
+	context.lineWidth = 2
+	context.strokeRect(cropL, cropT, cropW, cropH)
+	if (canChangeSizeLocal.value as boolean) {
+		drawResizeHandles(context, cropL, cropT, cropW, cropH)
+	}
+	context.draw()
+}
+
+const getResizeHandle = (point: CropTouch): string => {
+	const tolerance = 28
+	const left = cropLeft.value
+	const top = cropTop.value
+	const width = numberValue(cropWidth.value, 0)
+	const height = numberValue(cropHeight.value, 0)
+	if (Math.abs(point.x - left) <= tolerance && Math.abs(point.y - top) <= tolerance) return 'top-left'
+	if (Math.abs(point.x - left - width) <= tolerance && Math.abs(point.y - top) <= tolerance) return 'top-right'
+	if (Math.abs(point.x - left) <= tolerance && Math.abs(point.y - top - height) <= tolerance) return 'bottom-left'
+	if (Math.abs(point.x - left - width) <= tolerance && Math.abs(point.y - top - height) <= tolerance) return 'bottom-right'
+	return ''
+}
+
+const applyScale = (nextScale: number): void => {
+	const centerX = imageX.value + displayWidth.value / 2
+	const centerY = imageY.value + displayHeight.value / 2
+	scaleValue.value = nextScale
+	displayWidth.value = baseDisplayWidth.value * nextScale
+	displayHeight.value = baseDisplayHeight.value * nextScale
+	imageX.value = centerX - displayWidth.value / 2
+	imageY.value = centerY - displayHeight.value / 2
+}
+
+const resizeCrop = (point: CropTouch): void => {
+	const minSize = 50
+	const oldW = numberValue(cropWidth.value, 0)
+	const oldH = numberValue(cropHeight.value, 0)
+	const centerX = cropLeft.value + oldW / 2
+	const centerY = cropTop.value + oldH / 2
+	let nextW = Math.abs(point.x - centerX) * 2
+	let nextH = Math.abs(point.y - centerY) * 2
+	const maxW = numberValue(canvasWidth.value, 0) - 24
+	const maxH = numberValue(canvasHeight.value, 0) - 24
+	nextW = clamp(nextW, minSize, maxW)
+	nextH = clamp(nextH, minSize, maxH)
+	// inner 模式：裁剪框不得大于当前图片显示尺寸，避免露出空白
+	if (innerMode.value as boolean) {
+		const displayW = numberValue(displayWidth.value, 0)
+		const displayH = numberValue(displayHeight.value, 0)
+		if (displayW > 0) nextW = Math.min(nextW, displayW)
+		if (displayH > 0) nextH = Math.min(nextH, displayH)
+	}
+	const lockedWidth = rpxToPx(props.lockWidth, 0)
+	const lockedHeight = rpxToPx(props.lockHeight, 0)
+	if (lockedWidth > 0) nextW = lockedWidth
+	if (lockedHeight > 0) nextH = lockedHeight
+	cropWidth.value = nextW
+	cropHeight.value = nextH
+}
+
+const handlePinch = (first: CropTouch, second: CropTouch): void => {
+	const currentDistance = distanceBetween(first, second)
+	if (startPinchDistance.value > 0 && (canScaleLocal.value as boolean)) {
+		let minScale = numberValue(minScaleValue.value, 0.3)
+		const maxScale = numberValue(maxScaleValue.value, 4)
+		// inner 模式：缩放下限至少保证图片覆盖裁剪框
+		if (innerMode.value as boolean) {
+			const baseW = Math.max(1, numberValue(baseDisplayWidth.value, 1))
+			const baseH = Math.max(1, numberValue(baseDisplayHeight.value, 1))
+			const cropW = numberValue(cropWidth.value, 0)
+			const cropH = numberValue(cropHeight.value, 0)
+			const coverScale = Math.max(cropW / baseW, cropH / baseH)
+			if (coverScale > minScale) {
+				minScale = coverScale
+			}
+		}
+		const nextScale = clamp(startScaleValue.value * currentDistance / startPinchDistance.value, minScale, maxScale)
+		applyScale(nextScale)
+	}
+	keepImageInCrop()
+	draw()
+}
+
+const isMoveLockedX = (): boolean => {
+	return lockMode.value == 'x' || lockMode.value == 'longSel' || lockMode.value == 'long'
+}
+
+const isMoveLockedY = (): boolean => {
+	return lockMode.value == 'y' || lockMode.value == 'shortSel' || lockMode.value == 'short'
+}
+
+const fitImage = (): void => {
+	const cropW = numberValue(cropWidth.value, 300)
+	const cropH = numberValue(cropHeight.value, 300)
+	const imgW = Math.max(1, numberValue(imageWidth.value, 1))
+	const imgH = Math.max(1, numberValue(imageHeight.value, 1))
+	let scale = Math.max(cropW / imgW, cropH / imgH)
+	const imageRadio = imgW / imgH
+	const mode = stretchMode.value
+	if (mode == 'x') {
+		scale = cropW / imgW
+	} else if (mode == 'y') {
+		scale = cropH / imgH
+	} else if (mode == 'long') {
+		scale = imageRadio > 1 ? cropW / imgW : cropH / imgH
+	} else if (mode == 'short') {
+		scale = imageRadio > 1 ? cropH / imgH : cropW / imgW
+	}
+	let displayW = imgW * scale
+	let displayH = imgH * scale
+	if (innerMode.value as boolean) {
+		if (displayW < cropW) {
+			displayW = cropW
+			displayH = displayW / imageRadio
+		}
+		if (displayH < cropH) {
+			displayH = cropH
+			displayW = displayH * imageRadio
+		}
+	}
+	baseDisplayWidth.value = displayW
+	baseDisplayHeight.value = displayH
+	displayWidth.value = displayW
+	displayHeight.value = displayH
+	scaleValue.value = 1
+	rotateDeg.value = 0
+	imageX.value = cropLeft.value + (cropW - displayW) / 2
+	imageY.value = cropTop.value + (cropH - displayH) / 2
+	keepImageInCrop()
+	emit('avtinit')
+}
+
+const createCanvasImage = (path: string): void => {
+	const canvas = canvasContext.value
+	if (canvas == null) {
+		emit('error', new Error('Canvas is not ready'))
+		return
+	}
+	const image = canvas.createImage()
+	image.onload = () => {
+		imageElement.value = image
+		fitImage()
+		draw()
+	}
+	// #ifdef APP-ANDROID
+	image.onerror = () => {
+		emit('error', new Error('Image load failed'))
+	}
+	// #endif
+	// #ifndef APP-ANDROID
+	;(image as any).onerror = () => {
+		emit('error', new Error('Image load failed'))
+	}
+	// #endif
+	image.src = path
+}
+
+const loadImage = (path: string): void => {
+	uni.getImageInfo({
+		src: path,
+		success: (info: GetImageInfoSuccess) => {
+			imagePath.value = path
+			imageWidth.value = info.width
+			imageHeight.value = info.height
+			visible.value = true
+			nextTick(() => {
+				initCanvas().then(() => {
+					createCanvasImage(info.path)
+				}).catch((error: any | null) => {
+					emit('error', error)
+				})
+			})
+		},
+		fail: () => {
+			emit('error', '读取图片失败')
+		}
+	})
+}
+
+const drawPreview = (): void => {
+	const context = ctx.value
+	const image = imageElement.value
+	if (context == null || image == null) {
+		return
+	}
+	const canvasW = numberValue(canvasWidth.value, 0)
+	const canvasH = numberValue(canvasHeight.value, 0)
+	const cropW = numberValue(cropWidth.value, 0)
+	const cropH = numberValue(cropHeight.value, 0)
+	const previewW = Math.min(canvasW - 40, cropW)
+	const previewH = cropH * previewW / Math.max(1, cropW)
+	const x = (canvasW - previewW) / 2
+	const y = Math.max(20, (canvasH - previewH) / 2)
+	context.clearRect(0, 0, canvasW, canvasH)
+	context.fillStyle = '#000000'
+	context.fillRect(0, 0, canvasW, canvasH)
+	context.save()
+	context.beginPath()
+	context.rect(x, y, previewW, previewH)
+	context.clip()
+	context.fillStyle = props.fillColor
+	context.fillRect(x, y, previewW, previewH)
+	const scaleX = previewW / cropW
+	const scaleY = previewH / cropH
+	const cropL = cropLeft.value
+	const cropT = cropTop.value
+	const displayW = numberValue(displayWidth.value, 0)
+	const displayH = numberValue(displayHeight.value, 0)
+	context.translate(x + (imageX.value + displayW / 2 - cropL) * scaleX, y + (imageY.value + displayH / 2 - cropT) * scaleY)
+	context.rotate(rotateDeg.value * Math.PI / 180)
+	context.drawImage(image, -displayW * scaleX / 2, -displayH * scaleY / 2, displayW * scaleX, displayH * scaleY)
+	context.restore()
+	context.strokeStyle = '#ffffff'
+	context.lineWidth = 1
+	context.strokeRect(x, y, previewW, previewH)
+	context.draw()
+}
+
+const applyOptions = (options: UTSJSONObject): void => {
+	cropWidth.value = rpxToPx(options['areaWidth'], rpxToPx(props.areaWidth, 300))
+	cropHeight.value = rpxToPx(options['areaHeight'], rpxToPx(props.areaHeight, 300))
+	outputWidth.value = rpxToPx(options['exportWidth'], rpxToPx(props.exportWidth, 260))
+	outputHeight.value = rpxToPx(options['exportHeight'], rpxToPx(props.exportHeight, 260))
+	minScaleValue.value = numberValue(options['minScale'], numberValue(props.minScale, 0.3))
+	maxScaleValue.value = numberValue(options['maxScale'], numberValue(props.maxScale, 4))
+	canScaleLocal.value = options['canScale'] == null ? props.canScale : (options['canScale'] as boolean)
+	canRotateLocal.value = (options['canRotate'] == null ? props.canRotate : (options['canRotate'] as boolean)) && !(options['inner'] == null ? props.inner : (options['inner'] as boolean))
+	canChangeSizeLocal.value = options['canChangeSize'] == null ? props.canChangeSize : (options['canChangeSize'] as boolean)
+	innerMode.value = options['inner'] == null ? props.inner : (options['inner'] as boolean)
+	lockMode.value = normalizeString(options['lock'], normalizeString(props.lock))
+	stretchMode.value = normalizeString(options['stretch'], normalizeString(props.stretch))
+	previewing.value = false
+}
+
+const openPicker = (): void => {
+	uni.chooseImage({
+		count: 1,
+		sizeType: ['original', 'compressed'],
+		sourceType: ['album', 'camera'],
+		success: (res: ChooseImageSuccess) => {
+			if (res.tempFilePaths.length == 0) {
+				return
+			}
+			loadImage(res.tempFilePaths[0])
+		},
+		fail: () => {
+			emit('cancel')
+		}
+	})
+}
+
+function chooseImage(index: any | null = 0, params: UTSJSONObject = {} as UTSJSONObject, data: any | null = null): void {
+	const options = toObject(params)
+	lastOptions.value = options
+	currentIndex.value = typeof index === 'number' ? index : 0
+	applyOptions(options)
+	returnData.value = data
+	// 业务方已自行拍照/选图时，直接裁剪传入的路径，不再打开系统选图
+	const imageSrc = normalizeString(options['imageSrc']).trim()
+	if (imageSrc.length > 0) {
+		loadImage(imageSrc)
+		return
+	}
+	openPicker()
+}
+
+const openDefault = (): void => {
+	chooseImage(0, {} as UTSJSONObject)
+}
+
+// 重选：按上次配置重新初始化裁剪参数，但始终回到系统选图，不重复加载传入的 imageSrc
+const select = (): void => {
+	applyOptions(lastOptions.value)
+	openPicker()
+}
+
+const touchStart = (e: UniTouchEvent): void => {
+	if (previewing.value) {
+		return
+	}
+	const first = touchAt(e, 0)
+	const second = touchAt(e, 1)
+	if (first != null && second != null) {
+		activeTouch.value = first
+		secondTouch.value = second
+		startPinchDistance.value = distanceBetween(first, second)
+		startScaleValue.value = scaleValue.value
+		resizeHandle.value = ''
+		return
+	}
+	const point = touchPoint(e)
+	activeTouch.value = point
+	secondTouch.value = null
+	resizeHandle.value = (canChangeSizeLocal.value as boolean) ? getResizeHandle(point) : ''
+}
+
+const touchMove = (e: UniTouchEvent): void => {
+	if (previewing.value) {
+		return
+	}
+	const first = touchAt(e, 0)
+	const second = touchAt(e, 1)
+	if (first != null && second != null) {
+		handlePinch(first, second)
+		return
+	}
+	const last = activeTouch.value
+	if (last == null) {
+		return
+	}
+	const point = touchPoint(e)
+	if (resizeHandle.value.length > 0) {
+		resizeCrop(point)
+	} else {
+		if (!isMoveLockedX()) {
+			imageX.value += point.x - last.x
+		}
+		if (!isMoveLockedY()) {
+			imageY.value += point.y - last.y
+		}
+	}
+	activeTouch.value = point
+	keepImageInCrop()
+	draw()
+}
+
+const touchEnd = (): void => {
+	activeTouch.value = null
+	secondTouch.value = null
+	resizeHandle.value = ''
+}
+
+const rotate = (): void => {
+	if ((canRotateLocal.value as boolean) == false || (previewing.value as boolean)) {
+		return
+	}
+	rotateDeg.value = (rotateDeg.value + 90) % 360
+	draw()
+}
+
+const preview = (): void => {
+	previewing.value = true
+	drawPreview()
+}
+
+const exitPreview = (): void => {
+	previewing.value = false
+	draw()
+}
+
+const confirm = (): void => {
+	const context = exportCtx.value
+	const canvas = exportCanvasContext.value
+	const image = imageElement.value
+	if (context == null || canvas == null || image == null) {
+		emit('error', new Error('Canvas is not ready'))
+		return
+	}
+	const outputW = numberValue(outputWidth.value, 0)
+	const outputH = numberValue(outputHeight.value, 0)
+	const displayW = Math.max(1, numberValue(displayWidth.value, 1))
+	const displayH = Math.max(1, numberValue(displayHeight.value, 1))
+	const cropW = numberValue(cropWidth.value, 0)
+	const cropH = numberValue(cropHeight.value, 0)
+	const cropL = cropLeft.value
+	const cropT = cropTop.value
+	const imageXLocal = numberValue(imageX.value, 0)
+	const imageYLocal = numberValue(imageY.value, 0)
+	context.clearRect(0, 0, outputW, outputH)
+	context.fillStyle = props.fillColor
+	context.fillRect(0, 0, outputW, outputH)
+	context.save()
+	const scaleX = outputW / Math.max(1, cropW)
+	const scaleY = outputH / Math.max(1, cropH)
+	context.scale(scaleX, scaleY)
+	context.translate(imageXLocal + displayW / 2 - cropL, imageYLocal + displayH / 2 - cropT)
+	context.rotate(rotateDeg.value * Math.PI / 180)
+	context.drawImage(image, -displayW / 2, -displayH / 2, displayW, displayH)
+	context.restore()
+	context.draw()
+	const quality = clamp(numberValue(props.quality, 1), 0, 1)
+	const path = canvas.toDataURL('image/png', quality)
+	visible.value = false
+	previewing.value = false
+	emit('confirm', {
+		path,
+		avatar: path,
+		index: currentIndex.value,
+		data: returnData.value
+	} as UTSJSONObject)
+}
+
+const close = (): void => {
+	visible.value = false
+	emit('cancel')
+}
+
+defineExpose({
+	canvasId,
+	exportCanvasId,
+	canvasContext,
+	exportCanvasContext,
+	ctx,
+	exportCtx,
+	imageElement,
+	imagePath,
+	imageWidth,
+	imageHeight,
+	visible,
+	canvasWidth,
+	canvasHeight,
+	cropWidth,
+	cropHeight,
+	outputWidth,
+	outputHeight,
+	imageX,
+	imageY,
+	baseDisplayWidth,
+	baseDisplayHeight,
+	displayWidth,
+	displayHeight,
+	scaleValue,
+	minScaleValue,
+	maxScaleValue,
+	rotateDeg,
+	canScaleLocal,
+	canRotateLocal,
+	canChangeSizeLocal,
+	lockMode,
+	stretchMode,
+	innerMode,
+	returnData,
+	lastOptions,
+	activeTouch,
+	secondTouch,
+	startPinchDistance,
+	startScaleValue,
+	resizeHandle,
+	previewing,
+	currentIndex,
+	canvasStyle,
+	exportCanvasStyle,
+	cropLeft,
+	cropTop,
+	showRotateButton,
+	openDefault,
+	initCanvas,
+	chooseImage,
+	select,
+	openPicker,
+	loadImage,
+	createCanvasImage,
+	fitImage,
+	draw,
+	touchStart,
+	touchMove,
+	touchEnd,
+	keepImageInCrop,
+	drawResizeHandles,
+	drawHandle,
+	getResizeHandle,
+	resizeCrop,
+	handlePinch,
+	applyScale,
+	isMoveLockedX,
+	isMoveLockedY,
+	rotate,
+	preview,
+	exitPreview,
+	drawPreview,
+	confirm,
+	close
+})
+</script>
+
+<style lang="scss" scoped>
+	.up-cropper {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.up-cropper__panel {
+		position: fixed;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		z-index: 999;
+		background-color: #000000;
+	}
+
+	.up-cropper__canvas {
+		display: flex;
+	}
+
+	.up-cropper__export {
+		position: fixed;
+		left: -9999px;
+		top: -9999px;
+	}
+
+	.up-cropper__toolbar {
+		height: 70px;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-around;
+		background-color: #111111;
+	}
+
+	.up-cropper__button {
+		color: #ffffff;
+		font-size: 15px;
+		padding: 10px;
+	}
+</style>