canvas压缩图片
1.canvas.toDataUrl压缩图片
canvas的toDataUrl方法可以将内容导出为base64编码格式的图片，采用base64编码将比源文件大1/3，但是该方法可以指定导出图片质量，所以前端可实现上传图片的压缩。先通过fileApi拿到本地图片地址，然后新建一个Img元素，图片绘制到canvas中后再将其导出（压缩）。例如：
$(':file').on('change',function(){
var file = this.files[0];
var url = webkitURL.createObjectURL(file);
/* 生成图片
* ---------------------- */
var $img = new Image();
$img.onload = function() {
//生成比例
var width = $img.width,
height = $img.height,
scale = width / height;
width = parseInt(800);
height = parseInt(width / scale);
//生成canvas
var $canvas = $('#canvas');
var ctx = $canvas[0].getContext('2d');
$canvas.attr({width : width, height : height});
ctx.drawImage($img, 0, 0, width, height);
var base64 = $canvas[0].toDataURL('image/jpeg',0.5);
//发送到服务端
$.post('upload.php',{formFile : base64.substr(22) },function(data){
$('#php').html(data);
});
}
$img.src = url;
});
2.存在问题
但是此方法存在一些问题：
1.在ios上当图片过大时图片会被压扁
2.在android上无法指定压缩质量
3.图片通过fileApi读取进来，竖着拍的图片会横置
好在这些问题都有解决方案：
1.使用ios-imagefile-megapixel，将大图拆分为一块块的小图读取到小canvas再拼起来(还可以设置图片旋转)
3.使用JpegMeta（没有测过）
