uniapp，上传照片前进行裁剪

1. 使用组件ksp-cropper

2.使用

<template>
	<view class="imgCropper">
		<button @click="select">选择图片</button>
		<image mode="widthFix" :src="path"/>
		<ksp-cropper mode="free" :width="130" :height="160" :maxWidth="1024" :maxHeight="1024" :url="url" @cancel="oncancel" @ok="onok"></ksp-cropper>
	</view>
</template>

<script setup>
	import { ref } from "vue";
	import kspCropper from "../ksp-cropper/ksp-cropper.vue";
	let url = ref('');
	let path = ref('')
	
	let select = () => {
		uni.chooseImage({
			count: 1,
			success: (rst) => {
				url.value = rst.tempFilePaths[0];
			}
		});
	}
	
	let onok = (ev) => {
		url.value = "";
		path.value = ev.path;
	}
	
	let oncancel = () => {
		url.value = ""
	}
</script>

<style scoped lang="scss">
.imgCropper{
	width: 100%;
	height: 100%;
	position: relative;
}
</style>

3.效果

uniapp图片裁剪

4.ksp-cropper组件在文章顶部