uniapp内使用裁剪图片返回base64

483 阅读1分钟

在插件市场引入组件 ext.dcloud.net.cn/plugin?id=5…

页面中写一个 方法 裁剪完成 会返回一个裁剪后图片的base64 即下面的event.data

//裁剪图片
			cutImg() {
				console.log(120000);
				const that = this;
				uni.navigateTo({
					url: "/uni_modules/buuug7-img-cropper/pages/cropper",
					events: {
						imgCropped(event) {
							// 监听裁剪完成
							// 返回的 event 中包含了已经裁剪好图片的base64编码字符串
							// 你可以使用 <image :src="imgDataUrl" mode="aspectFit"></image> 组件来展示裁剪后的图片
							// 或者你可以将该字符串通过接口上传给服务器用来保存
							console.log(event);
							that.imgdata = event.data;
							// do whatever you want
							// upload to server
						},
					},
				});
			},

页面中

<view class="upload  flex a-c j-c" v-show="imgdata.length == 0" style="background: #F4F5F6;width:100%;height:200rpx" @click="cutImg">
<u-icon name="camera" size="80" color="#c0c4cc"></u-icon>
</view>

然后上传完图片什么的清空变量即可