问题前述：为了保证逻辑更清晰，文章采用不少的文字解析，如果你比较紧急，可以不用看文字直接浏览代码呈现部分。

问题背景：最近有做到一个需求，用户实名认证上传身份证，一般情况下直接通过手机拍照上传这样的图片很大（大约2-4M），一方面浪费服务器带宽，另外一方面上传的速度很慢，体验效果也不是很好。

解决方案：前端进行图片预处理，先缩放一下图片之后再上传到后端处理。

思考过程：

（1）目前浏览器上传图片到服务器的过程有两种，一种是通过普通文件上传，即<form enctype="multipart/form-data">这种模式 ，另一种是方式就是通过文件的base64位编码，然后上传这段code后端解析这段code，这样便可以脱离文件本身。

（2）通常上传图片的时候是通过<input type="file" />表单控件来上传，可不可以通过获取图片链接压缩这个图片后来上传呢，这样是不行的，首先目前很多浏览器从隐私的角度上看，是不允许获取到完成的图片路径的，其次要是我们真的压缩了文件，那不是改变了源文件，也道理上也是不允许的，浏览器只能引用这个图片。

（3）综合上述两点，通过获取文件的base64位编码来上传图片是比较合理的，就需要通过浏览器压缩原有的图片得到压缩图片的base64位图片的code上传。

技术分析：需要浏览器支持h5，然后使用h5内置的canvas技术来压缩图片，目前主流的浏览器都已经支持h5，尤其是在wap端，可以放心使用，不过在pc上，一些低版本的浏览器可能不支持，需要适当做好兼容性。具体情况可以参考这篇文章，https://www.zhihu.com/question/19613759。

代码呈现：这里通过一段完整的ajax方式来展示图片的压缩过程（基于jQuery环境，请在头部添加）。

<script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.js"></script>

//核心代码 压缩图片并返回base64code ratio表示图片质量0-1之间function resizeImage(img,width,height,ratio){var canvas, ctx, baseCode64;canvas = document.createElement('canvas');canvas.width = width;canvas.height = height;ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0, width, height);baseCode64 = canvas.toDataURL("image/jpeg", ratio);return baseCode64;}/**在你的网页里面应该有一个元素*<input type="file" accept="image/gif, image/jpeg" onchange="startUpload(this)" data-remote="上传图片的url">*/function startUpload(obj){var input=obj;if(input.files){var imageName=obj.files[0];//获取file文件名//读取图片数据var f = input.files[0];/***************************核心代码 reader方法读取图片 start************************/var reader = new FileReader();reader.onload = function (e) {var data = e.target.result;//加载图片获取图片真实宽度和高度var image = new Image();image.onload=function(){var width = image.width;var height = image.height;//图片预判断，获取上传图片的的大小if(width<640){alert("图片的长不能小于640像素！");}else if(height<480){alert("图片的宽不能小于480像素！");}//图片上传else{var  base64=resizeImage(image,width,height,1);//$('body').html('<img src="'+base64+'">');return;调试图片的压缩结果var url=$(obj).data('remote');//发起异步传输请求，将压缩后图片的base64编码发送到服务器供解析$.ajax({type:'post',url: url, //用于文件上传的服务器端请求地址data:{image:base64,image_name:imageName},dataType: 'json', //返回值类型 一般设置为jsonsuccess: function (rs)  //服务器成功响应处理函数{//服务器响应成功处理函数，您可以在里面进行数据处理},error: function (data, status, e)//服务器响应失败处理函数{alert(e);}});}};image.src= data;};reader.readAsDataURL(f);/**核心代码 reader方法读取图片 end****/}else{alert("未检测到图片！");}}

技术点总结：

（1）Js压缩前端图片

（2）base64位图片编码

（3）获取file控件的文件名

（4）Js获取图片文件的长度和宽度