微信公眾號wx.chooseImage選中圖片后獲取圖片大小並壓縮

　　在做微信公眾號開發時，常需要用到圖片上傳。因此我們需要調用微信接口wx.chooseImage來選擇手機相冊中的圖片或者調起相機。

　　一般而言，我們上傳圖片都需要對圖片大小進行控制，但是微信公眾號不是微信小程序，在微信公眾號里，wx.getFileInfo獲取圖片詳情的接口是不存在的，那我們要如何在wx.chooseImage選中圖片后，獲取圖片的大小呢？

　　我翻閱了大量的資料，始終找不到方法，最后我找到了一個折中的辦法：使用wx.getLocalImgData獲取圖片的base64碼，然后通過base64碼的長度計算圖片大小。代碼如下：

 

selectImage = function(){
    wx.chooseImage({
        count: 1, // 選擇圖片張數，默認9，本示例只測試一張圖片
        sizeType: ['original', 'compressed'], // 指定是原圖還是壓縮圖，默認二者都有
        sourceType: ['album', 'camera'], // 指定來源是相冊還是相機，默認二者都有
        success: function (res) {
            console.log(res.localIds[0]);//打印獲取到的圖片地址
            try{
                //圖片轉base64，使用jssdk最新的js文件
                wx.getLocalImgData({
                    localId: res.localIds[0],//圖片的本地ID
                    success: function (resTwo) {
                        console.log(resTwo.localData);//打印獲取到的圖片base64碼
                        if(resTwo.localData.indexOf(";base64,")==-1){//兼容處理，安卓獲取的圖片base64碼沒有前綴，而蘋果有,base64前綴並不固定
                            resTwo.localData = "data:image/jpeg;base64," + resTwo.localData;//加上base64前綴
                        }
                        if(resTwo.localData.indexOf("data:image/jgp;base64,")!=-1){//兼容處理，若是蘋果手機，將前綴中的jgp替換成jpeg
                            resTwo.localData=resTwo.localData.replace("data:image/jgp;base64,","data:image/jpeg;base64,");
                        }
                        //這樣計算出來的圖片大小與圖片實際大小有一定差別，一般會比原圖大30%的樣子，猜測可能是wx.chooseImage導致圖片變大了。不過大體能用
                        console.log("圖片大小：" + resTwo.localData.length / 1024 / 1.3 + "KB");//打印計算出來的圖片大小
                        //計算壓縮比例（按壓縮到100kb計算）：壓縮比例 = (圖片大小/100)再開根號再取整
                        //由於開跟、取整等操作，壓縮比例存在一定偏差，但是大體能用
                        var prop = parseInt(Math.sqrt(resTwo.localData.length / 102400 / 1.3));
                        console.log(prop);//打印壓縮比例
                        if(prop > 1){//若圖片>100kb，即壓縮比例>1，壓縮圖片
                            compressedImg(resTwo.localData,prop);//使用canvas壓縮圖片
                        }else{//否則，可以直接使用該圖片
                            console.log(resTwo.localData);
                        }
                    },fail: function(resTwo){
                        console.log(resTwo.localData);//打印報錯信息
                    }
                });
            }catch(e){
                alert(e);//打印報錯信息
            }
        }
    });
};

//使用canvas壓縮圖片
compressedImg = function(path,prop){
    var img = new Image();
    img.src = path;
    img.onload = function () {
        var that = this;
        // 按壓縮比例進行壓縮
        var w = that.width/prop,
            h = that.height/prop;
        // console.log(w);
        // console.log(h);
        var quality = 1;  // 默認圖片質量為1
        //生成canvas
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        // 創建屬性節點
        var anw = document.createAttribute("width");
        anw.nodeValue = w;
        var anh = document.createAttribute("height");
        anh.nodeValue = h;
        canvas.setAttributeNode(anw);
        canvas.setAttributeNode(anh);
        ctx.drawImage(that, 0, 0, w, h);
        // quality值越小，所繪制出的圖像越模糊
        var imgUrl = canvas.toDataURL('image/jpeg', quality);//壓縮后的圖片base64碼
        console.log(imgUrl);//打印壓縮后的圖片base64碼
        console.log("壓縮后：" + imgUrl.length / 1024 + "KB");
    }
};       

　　通過這樣計算出來的圖片大小與圖片實際大小有一定差別，一般會比原圖大30%的樣子，猜測可能是wx.chooseImage導致圖片變大了。另外由於開根和取整，壓縮比例也有一定偏差，不過大體能用。
　　另外就是，一定要用jssdk最新的js文件，以免出錯。jssdk具體配置方法大家可以查閱微信公眾號官方開發文檔，jssdk最新js文件我也放在下面：
　　微信公眾號官方開發文檔
　　jweixin-1.6.0.js