注释已写在文件里，可直接复制
压缩前的尺寸：
压缩后的尺寸
直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="file" accept="image/*" onchange="change(this)" />
<canvas id="input_canvas">
</canvas>
<script>
function change(self){
// data为最后要传送到后台的数据
var data = {};
var press =function() {
// 转码为base64位
var Pic = document.getElementById('input_canvas').toDataURL("image/png"),
// 去掉头部
pics = Pic.replace(/^data:image\/(png|jpg);base64,/, "");
// 图片数据放入data
data.img = pics;
}
var getStyle =function(obj, attr) {
// 用于获取图片宽高的样式兼容
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
// 新建canvas画布
var Cnv = document.getElementById('input_canvas');
var Cntx = Cnv.getContext('2d');
// 新建图片
var imgss = new Image();
// 获取上传的图片
var tmpFile = self.files[0];
// 新建文件
var reader = new FileReader();
// 上传的文件转码
reader.readAsDataURL(tmpFile);
reader.onload = function (e) {
var url = e.target.result;
imgss.src = url;
imgss.onload = function () {
//宽高比例
var m = imgss.width / imgss.height,
n = parseFloat(getStyle(imgss, 'height'));
Cnv.height = 100; //该值影响缩放后图片的大小
Cnv.width = Cnv.height * m;
//绘制画布（图片缩放的过程）
Cntx.drawImage(imgss, 0, 0, Cnv.width, Cnv.height);
};
};
setTimeout(function () {
press();//引入function，处理数据
}, 50);
console.log(data) //验证
}
</script>
</body>
</html>