混合App应用实现本地头像剪切，压缩上传功能（支持任何H5框架）

头像上传是任何一个应用都会用到的功能，但是头像的尺寸往往需要控制一下，这样会有一个比较不错的显示效果，例如我们通常会控制用户的头像为正方形，这个切圆角边的时候不会变形，显示位置也很固定。

对于H5混合应用来讲，我们就需要插件做为支持， 今天来讲一下我的解决方案， 此方案参考参考了如下几个作者的代码，非常感谢这几位作者的代码，解决了很大问题，但是存在小的issue，我修复了一下：

jeduan作者的插件：

https://github.com/jeduan/cordova-plugin-crop

原生代码支持作者

https://github.com/kishikawakatsumi/PEPhotoCropEditor

https://github.com/jdamcd/android-crop

folk的代码，做了小的更改和issue修复。

主要是对于头像上传固定于正方形切图，并且可以缩放，保证用户的显示尺寸，有点类似于微信的头像上传！

https://github.com/jiangbophd/cordova-plugin-crop

安装

cordova plugin add https://github.com/jiangbophd/cordova-plugin-crop

调用方法：

plugins.crop(function success (url) {
    //新的url
}, function fail () {

}, 'local image url', {quality: 30})

头像剪切后后返回一个新的url，我们默认显示这个url即可。

压缩上传

混合应用是既存在JS代码，也存在native代码，所以压缩上传的方案有很多，可以native也可以JS。

这里鉴于头像只上传一张，所以可以用H5的canvas进行压缩处理。因为我们的头像剪切的时候已经对头像质量做了一个控制：

{quality: 30}

如果想进一步压缩的话，可以用如下代码：

let image = new Image(),
            canvas = document.createElement("canvas"),
            ctx = canvas.getContext("2d"),
            ext = image.src.substring(image.src.lastIndexOf(".") + 1).toLowerCase();
        image.src = imgUrl;
        canvas.width = image.width;
        canvas.height = image.height;
        ctx.drawImage(image, 0, 0, image.width, image.height);
        console.log(canvas.toDataURL("image/" + ext));
        return canvas.toDataURL("image/" + ext);

最终图片被转换成base64编码，服务器就可以正常接收了！