html5 壓縮圖片上傳

html5移動端開發中經常需要對圖片壓縮上傳，方法如下：

var img = new Image();
img.src = path;        // 傳過來的圖片路徑在這裏用。
img.onload = function () {
              var that = this;
              var w = that.width,
               h = that.height;
               
               var  i=w/500;//根據不同的比例進行壓縮，壓縮過大容易導致圖片失真
               if(i>0){
                         w = w / i;
                          h = h / i;
                }
        
               var canvas = document.createElement('canvas');
              var ctx = canvas.getContext('2d');
             $(canvas).attr({width : w, height : h});
             ctx.drawImage(that, 0, 0, w, h);
             var base64 = canvas.toDataURL('image/jpeg', 1);   //1最清晰，越低越模糊。對生成的base64進行上傳
                 
}