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

曾经终败给现在 2022-06-03 09:18 149阅读 0赞

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

**问题背景**：最近有做到一个需求，用户实名认证上传身份证，一般情况下直接通过手机拍照上传这样的图片很大（大约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环境，请在头部添加）。

//核心代码 压缩图片并返回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', //返回值类型 一般设置为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获取图片文件的长度和宽度

[http_apps.bdimg.com_libs_jquery_1.8.3_jquery.js]: https://cdn2.jianshu.io/assets/babel-polyfill-e27dec85eeb94683dfc7.js