uniapp裁剪框根据宽高,导出图片类型裁剪相应图片

本文用的是小程序的裁剪框，二次修改了公司大佬的插件

在unipp框架中，因为这个框架是新生的，也就是说并没有太多人使用，日常自己工作中使用出了Bug或者想要什么样的功能插件在百度上几乎都找不到自己想要的!公司本次项目功能点是需要APP上传图片，但是因为此APP功能已经与PC端打通，所以必须要做裁剪图片的功能，也就是指定图片px像素上传以及指定图片文件类型。话不多说先上代码.

clk(index) {
				
				uni.navigateTo({
					url: '../cut/cut?width=364&height=178&type=FM&fileType=jpg'
				})
			},

此处代码是通过单击事件跳转到cut页面，cut页面是裁剪页面,打个比方，因为如果传递实际宽度,比如说我想要我的上传图片像素是728*356px像素，如果传递实际图片像素那么裁剪框和图片显示就是超出手机的显示屏幕范围比如,

因为在代码里面是通过获取设备信息比如宽度比例这些，但是考虑到每个屏幕的比例不一样，所以我统一值为2，364*2=728，这样就省去了大量代码计算问题，还有一个问题就是我不会计算 所以就用简单粗暴的，如果你需要的图片分辨率很大也可以自行修改这个值,比如1080*1920的 你除以2也会超出，那你就自行计算什么样的尺寸最合适就行了

然后可能有朋友会问为什么要把Onload里面这个相乘参数圈出来,因为这个代码里面onload的时候是获取不到那个 像素比的值的，所以自行写了，跟那个像素比值一样就行了,canvas_width,canvas_height是导入图片的宽高364*2|178*2，这两个参数是我自行加上去的参数

364*178的分辨率显示的是如下样子,

单击确定的时候会调用方法

请记住

{original: true}这个值是必须要的，不然他会以你传入的宽高去裁剪尺寸图片,传入364*178那么导出就是364*178,传入这个就会以设备像素比乘以宽高的尺寸导出.

看一下源码we-cropper.js的这个方法，这个就是导出图片的，可以清晰的看到customOptions.original这个参数，这个就是我们传入的参数，设定为true,那么就是判断为真，进入里面计算值，乘以像素比就会得到自己想要的图片尺寸,然后在开头原文我也说过了，我是想要指定宽高，图片类型导出的裁剪后的图片，比如我说我要728*356 且图片类型为jpg的图片，他原始的裁剪是没有图片类型的，默认是PNG，这个是uniapp的canvas导出默认值，这个时候我在参数中加上了fileType，传过来了这个参数，那么这个参数是如何获取到的呢，因为没有写死,看一下方法metohds

在这里面定义的，传递过来的ref对象参数,self.cut是data参数，这个调用的时候就已经赋值进去了就是传递过来的时候

这个方法是父组件监听，然子组件调用就会进行回调方法,我们传递过来的参数是不是有一个type,并且在onload中也赋予了值，这个时候就通过这个回调，将裁剪后的图片回调到指定方法中，父组件需要监听这个回调方法，如下:

这样就会将裁剪后的图片回调到这个方法中进行使用及获取，需先回调再返回！

当然也修改了we-cropper.js中别的地方的参数  如果有不太理解的请留言一下，我有时间会看一下的 白话字有点多 谅解

如果我也不会 那么哥们你自求多福咯！