基于vue的移动端图片裁剪压缩处理

前端时间做Vue项目的时候，要用到图片压缩处理，网上查阅了资料后，发现并不能满足实际的业务需求；于是，自己结合网上的资料写了一个，有兴趣的小伙伴不妨试试~

废话不多说，先上效果图，无图无真相嘛~

效果图

可以在控制台看出图片压缩的信息：

压缩信息

本项目主要依赖有两个库，一个是 cropper 第三方图片裁剪库 ， 另一个是 exif ，获取图片源信息，主要是用来解决 ios 图片旋转的问题；

整个项目的核心 代码是 clipper.js ，其主要使用方式是直接给 input[file] 控件，添加change事件，并调用 methods 中的change方法，这里要传 event 对象， change 方法接收两个参数，第一个是 event 对象，第二个参数是一个对象，resultObj表示要展示的结果 img 对象，aspectRatio 表示宽高比，另外参数可以根据实际情况添加，主要参考cropper文档说明

使用方法

整个项目实现思路是，触发 change 事件后，动态添加 整个裁剪对象 ， 通过移动裁剪框，判断当前裁剪框的位置和大小，通过canvas将裁剪框范围内的图片信息提取出来，转成base64编码，放到 img 标签的 src 属性里，在此之前，会经过一次图片大小判断，如果上传的图片大于100K ，会通过 compress 函数对其经行压缩，压缩也是借助 canvas 对象，通过计算压缩比进行等比例的压缩，达到最终的效果；

图片压缩后的上传放在 postImg 函数里，目前是本地模拟，实际开发中请自行根据需求进行编写，等到上传成功之后销毁整个裁剪对象就大功告成了。

图片上传

整个项目已经托管在github上，核心代码都有较为详细的注释，有需要的小伙伴可以自行下载看看，如果觉得不错的话，记得给个star哈~
项目传送门

ps：由于编辑器的问题，强迫症请忽略那些红色波浪线...