廢話不多少，直接上代碼！

壓縮圖片函數

 function canvasDataURL(path, obj, callback){
       var img = document.createElement('img');
             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);
            }
        }；

調用函數

canvasDataURL("img/c6.png", {
//  注意：在pc端可以用絕對路徑或相對路徑，移動端最好用絕對路徑（因為用take photo后的圖片路徑，我沒有試成功（如果有人試成功了可以分享一下經驗））
   width : 300,
   height:100,
   quality:0.7
}, function(base){
//直接將獲取到的base64的字符串，放到一個image標簽中就可看到測試后的壓縮之后的樣式圖了
 document.getElementById("transform").src = base;
 console.log("壓縮后：" + base.length / 1024 + " " + base);　　　　
})

圖片上傳與壓縮

<img id="transform" src="img/c6.png"/>
 <input type="file" onchange="file(event)" />
<script>
function file(ev) {
    console.log(ev.target.files[0])
    var files = ev.target.files[0]
    var reade = new FileReader()
    reade.readAsDataURL(ev.target.files[0])
    reade.onload = function (data) {
        // console.log(data.target.result)
        canvasDataURL(data.target.result, { quality:0.7}, function(base){
//直接將獲取到的base64的字符串，放到一個image標簽中就可看到測試后的壓縮之后的樣式圖了
 document.getElementById("transform").src = base;
 console.log("壓縮后：" + base.length / 1024 + " " + base);　　　　
})；
    }
}；
<script>

圖片上傳與壓縮就是這么簡單，歡迎大家點評指導。