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

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

HTML代码

<input type="file" name="headpic" id="headpicinput" style="display: none;" onchange="UpLoad(this)"/>
<div id="" class="cell">
    <a href="javascript:void(0);" onclick="choosePic();">
    <img src="../Images/1.jpg" style="width: 100%;" id="preViewImg"/></a>
</div>
<canvas id="canvas"></canvas>
<input type="hidden" id="imgUrl"/>

JS代码

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

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

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

function UpLoad(e) {
	var f = e.files[0];