頭像上傳是任何一個應用都會用到的功能，但是頭像的尺寸往往需要控制一下，這樣會有一個比較不錯的顯示效果，例如我們通常會控制使用者的頭像為正方形，這個切圓角邊的時候不會變形，顯示位置也很固定。

對於H5混合應用來講，我們就需要外掛做為支援， 今天來講一下我的解決方案， 此方案參考參考瞭如下幾個作者的程式碼，非常感謝這幾位作者的程式碼，解決了很大問題，但是存在小的issue，我修復了一下：

jeduan作者的外掛：

原生程式碼支援作者

folk的程式碼，做了小的更改和issue修復。

主要是對於頭像上傳固定於正方形切圖，並且可以縮放，保證使用者的顯示尺寸，有點類似於微信的頭像上傳！

安裝

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編碼，伺服器就可以正常接收了！