UNIAPP微信小程序使用WelCropper

UNIAPP 微信小程序使用WelCropper

裁剪模式 mode: ‘quadrectangle’
效果图:

插件地址: https://gitee.com/hanzisky/welCropper

代码拉取下来后部分文件内容需要稍作调整 . 下方会列出修改部分

首先是文件放入文件夹

此处放了两个WelCropper是有原因的
两处的JS文件内容不同
test目录中的WekCropper.js文件放置了组件构造器 , 可防止编译报错 找不到组件构造器
Component is not found

welCropper目录中的welCropper.js文件是放置裁剪插件的function init() 初始化函数方法
也是我们需要修改的js文件

修改里面的小程序语法中的 that.setData({ });
为vue的语法 直接 that.变量名称 = 赋值 ;
不知道我这样说能不能理解. 意思就是我们需要将JS文件中的小程序语法, 改为uniapp 编译所需的vue语法 即可;
例图:
修改前
修改后

page.json文件声明页面引用组件

{
		    "path" : "pages/index/welCropper",
		    "style" : {
				 "usingComponents": {
					   "test-cropper": "/wxcomponents/test/welCropper"
				    },
				    "navigationBarTitleText": "裁剪图片",
				    "disableScroll": true
			}
}

页面引用

	<test-cropper
		id="welCropper"
		:cropperOptions="cropperOptions"
		:cropperMovableItems="cropperMovableItems"
		:cropperChangableData="cropperChangableData"
	>
	</test-cropper>

<script>
	export default {
		data() {
			return {
				cropperMovableItems:{},
				enchanceData: {
				  enchance: true,
				  originpath: '',
				  enchancepath: '',
				},
				cropperChangableData:{
					canCrop: true,
					rotateDegree: 0,
					originalSize: {
					    width: 0,
					    height: 0
					},
					scaleSize: {
					    width: 0,
					    height: 0
					},
					shape: {
					
					},
					previewImageInfo: {
					    x: 0,
					    y: 0,
					    w: 0,
					    h: 0
					}
				},
				cropperOptions: {
				    hidden: true,
				    src: '',
				    mode: '',
				    sizeType: []
				}
			};
		},
		onLoad(options) {
			var that = this;
			
			const device = wx.getSystemInfoSync();
			const W = device.windowWidth;
			const H = device.windowHeight - 50;
			
			//1.解析参数
			wx.showLoading({
				title: '预处理中',
			});
			// 初始化组件数据和绑定事件
			let cropper  = that.selectComponent("#welCropper");
			
			//2.从服务器上获取识别的边角   **注意**
			that.PreDealImage(options,cropper);
		},
		methods:{
			//获取图片剪裁的四个点
			PreDealImage(){
				let getCornerUrl = "";//请求地址
				let data = {
					'ImgPath': Path
				}
				that.$getApiData(getCornerUrl, data).then(res => {
					let retObj = res.data;
					//需要得到的返回值
					that.cropperMovableItems = {
							topleft: {
								x: retObj.data.corner[0].x,
								y: retObj.data.corner[0].y
							},
							topright: {
								x: retObj.data.corner[3].x,
								y: retObj.data.corner[3].y
							},
							bottomleft: {
								x: retObj.data.corner[2].x,
								y: retObj.data.corner[2].y,
							},
							bottomright: {
								x: retObj.data.corner[1].x,
								y: retObj.data.corner[1].y,
							}
					}
					//展示图片剪裁框
					cropper.showCropper({
						cropperMovableItems: that.cropperMovableItems,
						src: retObj.data.ImgSrc,
						mode: 'quadrectangle',
						sizeType: ['original'],   //'original'(default) | 'compressed'
						maxLength: 1000, //默认2000，允许最大长宽，避免分辨率过大导致崩溃
						callback: (res,enchangce) => {//enchangce无视 项目自用
							{
								let localImgPath = retObj.data.localImgPath;
								that.CutImage(res, localImgPath, Name);
							}
						}
					})
				});
					
			},
			//完成请求上传接口
			CutImage(res, localImgPath, Name) {
				
			}
		}
	}
</script>

<style lang="less">
@import "../../wxcomponents/welCropper/welCropper.wxss";
</style>

注: PreDealImage方法为请求后台返回的图片边角坐标 , 也就是图片的四个点的坐标

先暂时这样, 后续想到了别的再来补充