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进行上传
                 
}