圖片壓縮（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的字串資料進行映像化儲存。

　　　　

 

　　

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