最近公司的移动产品相约app要做一次活动，涉及到图片上传，图片又不能太大，不然用户体验太差，必须先压缩再上传，所以用到了html5的canvas和FileReader，代码先上，小弟前端经验不足，代码写得有点乱，有什么不足之处，望大神指点！
<div class="free-upload">
<p>上传您的约会照片，一张合影、一张票据哦！</p>
<div class="free-upload-photo">
<span id="photo_img"></span>
<input type="file" id="photo" />
</div>
<div class="free-upload-bill">
<span id="bill_img"></span>
<input type="file" id="bill" />
</div>
<p id="photo_loading">正在上传...</p>
</div>
js用到了jquery
var photo = $('#photo');
function isCanvasSupported(){
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}
photo.on('change', function(event){
if(!canvasSupported){
return;
}
compress(event, function(base64Img){
$.ajax({
'url' : '/?s=free/upload',
'type' : 'post',
'data' : {'base64Img' : base64Img},
'success' : function(ret){
//拿到php传过来的图片地址
}
});
});
});
function compress(event, callback){
var file = event.currentTarget.files[0];
var reader = new FileReader();
reader.onload = function (e) {
var image = $('<img/>');
image.on('load', function () {
var square = 700;
var canvas = document.createElement('canvas');
canvas.width = square;
canvas.height = square;
var context = canvas.getContext('2d');
context.clearRect(0, 0, square, square);
var imageWidth;
var imageHeight;
var offsetX = 0;
var offsetY = 0;
if (this.width > this.height) {
imageWidth = Math.round(square * this.width / this.height);
imageHeight = square;
offsetX = - Math.round((imageWidth - square) / 2);
} else {
imageHeight = Math.round(square * this.height / this.width);
imageWidth = square;
offsetY = - Math.round((imageHeight - square) / 2);
}
context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight);
var data = canvas.toDataURL('image/jpeg');
callback(data);
});
image.attr('src', e.target.result);
};
reader.readAsDataURL(file);
}