前端如何压缩图片

　　

使用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读取进来，竖着拍的图片会横置

好在这些问题都有解决方案：

1. 使用ios-imagefile-megapixel，将大图拆分为一块块的小图读取到小canvas再拼起来(还能够设置图片旋转)
2. 使用javascript_jpeg_encode
3. 使用JpegMeta（没有测过）