uniApp上传图片前，裁剪图片大小

最新推荐文章于 2026-04-20 12:06:31 发布

原创

最新推荐文章于 2026-04-20 12:06:31 发布 · 1k 阅读

标签

#uni-app

收录于

使用HBuilder插件市场中的ksp-cropper插件，结合图片上传实现

地址：ksp-cropper - DCloud 插件市场

直接当做组件引入使用（这里ksp-cropper组件最好放在外面，不要包在其他组件里面，不然裁剪组件大小可能会受影响）

<ksp-cropper class="crop" mode="fixed" :width="250" :height="290" :url="currentImageUrl"
			@cancel="localDataShowCropper=false" @ok="handleCropOk" v-if="localDataShowCropper"></ksp-cropper>
		<uni-list class="container1">
			<uni-list-item v-if="imgPath" clickable showExtraIcon="true" :extraIcon="{type: 'image-filled'}"
				title="证件照">
				<template v-slot:footer>
					<view class="slot-box">
						<image :src="imgUrl+imgPath" mode="heightFix" style="height: 150rpx;width: 100rpx;" @