uniapp选择图片截图功能的实现

<template>
	<view>
		<view class="imageUploadContainer">
			<view class="imageUploadList"> 
				<view class="imageUpload" @tap="avatarChoose">+</view>
			</view>
			<view style="width: 90%;margin: auto;margin-top: 50px;">
		       <image :src="originalFaceSrc" mode="widthFix"></image>
		    </view>
		</view>
		<l-clipper v-if="handleFaceStatus" width="700" height="700" :image-url="originalFaceSrc" @success="complete" @cancel="handleFaceStatus = false" />
	</view>
</template>

<script>
	import lClipper from '@/components/lime-clipper/index';
	export default {
		components: { lClipper },
		data() {
			return {
              originalFaceSrc:"../../static/avatar.png",
			  handleFaceStatus: false,
			   
			};
		},
		methods:{
			complete(e) {
				console.log(e);
				this.handleFaceStatus = false; 
				this.originalFaceSrc=e.url;
			},
			avatarChoose() {
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success(res) {
						// tempFilePath可以作为img标签的src属性显示图片
						//that.imgUpload(res.tempFiles[0].path);
						//let uploads = res.tempFiles[0].path;
						 that.originalFaceSrc = res.tempFiles[0].path;
						that.handleFaceStatus = true;
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.imageUpload {
		width: 160upx;
		height: 160upx;
		margin: 10upx;
		line-height: 130upx;
		text-align: center;
		font-size: 150upx;
		color: #d9d9d9;
		border: 1px solid #d9d9d9;
		border-radius: 8upx;
	}
</style>

效果图：

组件提供：
https://download.csdn.net/download/weixin_45932157/49716226