上传图片前将图片利用canvas进行压缩

我做的是上传食谱，上传餐品图片前需要将该图的质量进行压缩

HTML代码

JS代码

1.点击默认图片触发文件file（改变file的默认样式）

function choosePic() {
	$('#headpicinput').click();    
};

2.选择文件以及获得文件url

function UpLoad(e) {
	var f = e.files[0];
	fileType = f.type;
	if(/image\/\w+/.test(fileType)) {
		var fileReader = new FileReader();
		fileReader.readAsDataURL(f);
		fileReader.onload = function(event) {
			var result = event.target.result; //返回的dataURL 
			var image = new Image();
			image.src = result;
			//若图片大小大于1M，压缩后再上传，否则直接上传
			 if(f.size>1024*1024){   
               			 image.onload = function() { //创建一个image对象，给canvas绘制使用
					var canvas = document.getElementById("canvas");   
					canvas.width = this.width;
					canvas.height = this.height; //计算等比缩小后图片宽高 
					var ctx = canvas.getContext('2d');
					ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
					var newImageData = canvas.toDataURL(fileType, 0.8); //重新生成图片	
		      	 		sendData = newImageData.replace("data:"+fileType+";base64,",'');				
					dataLength=decodeBase64(sendData).length;//base64位图片长度（这里没有写这个方法）				
					$("#imgUrl").val(sendData);
					$("#preViewImg").attr("src",newImageData);
					$("#canvas").hide();
				}
           		 }else{
            			image.onload = function() { //创建一个image对象，给canvas绘制使用	
				sendData = result.replace("data:"+fileType+";base64,",'');	
				dataLength=decodeBase64(sendData).length;
				$("#preViewImg").attr("src",result);
				$("#imgUrl").val(sendData);					
			}
           	 }
		}
	} else {
		alert("请选择图片");
	}
}

这样就能在不改变图片宽高的情况下将图片变小。然后就点击上传后台的按钮将压缩后的图片上传到服务器了。
如果对FileReader不了解的可以访问这里
/*ps:这个压缩的一般是jpg格式的，上传的png格式图片可能会越压缩越大。。。。。不知道咋解决，有办法的话顺便告诉我一下，谢谢*/