Js（基于jQuey）网页端压缩图片后上传服务器

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

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

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

思考过程：

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

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

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

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

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

//核心代码 压缩图片并返回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;
    }
	/*
	*在你的网页里面应该有一个元素
	*
	*/
    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('');return;调试图片的压缩结果
                        var url=$(obj).data('remote');
						//发起异步传输请求，将压缩后图片的base64编码发送到服务器供解析
                        $.ajax({
                            type:'post',
                            url: url, //用于文件上传的服务器端请求地址
                            data:{
                                image:base64,
                                image_name:imageName
                            },
                            dataType: 'json', //返回值类型 一般设置为json
                            success: 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获取图片文件的长度和宽度