uniapp，上传照片前进行裁剪

最新推荐文章于 2025-04-11 17:29:07 发布

F2E_keze

最新推荐文章于 2025-04-11 17:29:07 发布

阅读量1.1k

点赞数 9

文章标签： uni-app 前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_56104994/article/details/136690401

版权

本文介绍了如何在Uniapp项目中利用ksp-cropper组件进行图片裁剪，展示了HTML模板结构、Vue脚本中的事件处理函数以及相关样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>