圖片壓縮（pc端和移動端都適用）

最近在作移動端遇到了一個問題就是：

　　手機拍照後，圖片過大若是上傳到服務器務必會浪費帶寬，最重要的是流量啊

別慌，好事兒來了，務必就會有人去研究研究圖片的壓縮：

　　鄙人結合前人的經驗，結合本身實戰，總結出一個方法供你們參考。　

 

                /**
                 * 圖片壓縮，默認同比例壓縮
                 * @param {Object} path    
                 *         pc端傳入的路徑能夠爲相對路徑，可是在移動端上必須傳入的路徑是照相圖片儲存的絕對路徑
                 * @param {Object} obj
                 *         obj 對象 有 width， height， quality(0-1)
                 * @param {Object} callback
                 *         回調函數有一個參數，base64的字符串數據
                 */
                function dealImage(path, obj, callback){
                    var img = new Image();
                    img.src = path;
                    img.onload = function(){
                        var that = this;
                        // 默認按比例壓縮
                        var w = that.width,
                            h = that.height,
                            scale = w / h;
                            w = obj.width || w;
                            h = obj.height || (w / scale);
                        var quality = 0.7;        // 默認圖片質量爲0.7
                        
                        //生成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);
                        // 圖像質量
                        if(obj.quality && obj.quality <= 1 && obj.quality > 0){
                            quality = obj.quality;
                        }
                        // quality值越小，所繪製出的圖像越模糊
                        var base64 = canvas.toDataURL('image/jpeg', quality );
                        // 回調函數返回base64的值
                        callback(base64);
                    }
                }

 

　　固然返回的是一個base64的一個字符串；

　　若是能夠試着測試一下壓縮後的圖片大小：

　　

                           // 調用函數處理圖片 　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　dealImage("路徑", {　　　　　　　　// 注意：在pc端能夠用絕對路徑或相對路徑，移動端最好用絕對路徑（由於用take photo後的圖片路徑，我沒有試成功（若是有人試成功了能夠分享一下經驗））
                                width : 200
                            }, function(base){　　　　　　　　　　　　　　　　　　// 直接將獲取到的base64的字符串，放到一個image標籤中就可看到測試後的壓縮以後的樣式圖了
                                document.getElementById("transform").src = base;
                                console.log("壓縮後：" + base.length / 1024 + "   " + base);　　　　
                            })

 　　綜上：主要思想就是獲取到圖片，利用H5 canvas技術進行圖片數據化爲 base64 的字符串，最後傳到後臺進行，後臺將base64的字符串數據進行圖像化儲存。