使用canvas压缩图片

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;         });

此方法存在一些问题：

　　1.在ios上当图片过大时图片会被压扁

　　2.在android上无法指定压缩质量

　　3.图片通过fileApi读取进来，竖着拍的图片会横置