对上传图片进行的压缩

代码：

html代码：

 <div class="img-pro" id="img-pro" >
                        <img id="pic"  src="img/up-logo.png"  onclick="return false">
                        <input id="upload" name="file" accept="image/*" type="file" style="display: none">
                    </div>

 var fileDom = document.getElementById("upload");
        // 需要压缩的最大尺寸
        var MAX_SIZE = 500;
        var files = [];
        //监听文件选择事件
        $("#pic").click(function() {
            $("#upload").click(); //隐藏了input:file样式后，点击头像就可以本地上传
            fileDom.addEventListener("change", function() {
                var fileImg=this.files;
                console.log(fileImg);
                for (var i = 0; i < fileImg.length; i++) {
                    var file = fileImg[i];
                    if (!/image\/\w+/.test(file.type)) {
                        alert("请选择图片")
                        return false;
                    }
                    //创建一个文件读取的工具类
                    var reader = new FileReader();
                    //这里利用了闭包的特性，来保留文件名
                    (function (x) {
                        reader.onload = function (e) {
                            var liNode = document.createElement("li");
                            liNode.innerText = x;
                            // document.getElementById("fileList").appendChild(liNode);
                            //调用压缩文件的方法，具体实现逻辑见下面
                            render(this.result, x);
                        }
                    })(file.name);
                    //告诉文件读取工具类读取那个文件
                    reader.readAsDataURL(file);
                }
            },false);
        });
        function render(src,name) {
            //创建Image对象
            var image = new Image();
    
            image.onload = function () {
                console.log(image.width,image.height);
                //通过固定的宽高比压缩
                //宽大于高的情况
                if (image.width > MAX_SIZE && image.width >= image.height) {
                    image.height *= MAX_SIZE / image.width;
                    image.width = MAX_SIZE;
                }
                //宽小于高的情况
                if (image.height > MAX_SIZE && image.height > image.width) {
                    image.width *= MAX_SIZE / image.height;
                    image.height = MAX_SIZE;
                }
                var canvas = document.createElement("canvas");
                //获取2d画布
                var ctx = canvas.getContext("2d");
                canvas.width = image.width;
                canvas.height = image.height;
                ctx.clearRect(0, 0, canvas.width, canvas.height);
    
                //绘制图片
                ctx.drawImage(image, 0, 0, image.width, image.height);
                //生成base64码
                var blob = canvas.toDataURL("image/png");
                files.push(blob);
                document.getElementById("pic").src = blob;
            };
            image.src = src;
        }