单张图片上传并压缩

注：本文的方法只是自己测试所写，具体项目中会有各种需求和兼容性问题，尤其移动端，建议使用插件或者原生提供方法 

思路大致如下，在 input 上绑定 change 事件，监测用户上传图片动作;

用户上传图片后，实例化fileReader对象，获取用户上传图片的base64编码，给展示用 image 的 src 赋值该base64编码；

new一个 image 对象，并对其 src 赋值该base64编码,判断该 image 大小；

如果小于等于规定尺寸，将该base64编码 push 进数组；

如果大于规定尺寸，利用 canvas 压缩图片；

判断图片尺寸是否大于规定尺寸，如果大于规定尺寸， canvas 宽高按规定大小，否则按图片大小；

最后利用 canvas.toDataURL() 方法得到 canvas 处理后的图片的base64编码，并将该base64编码  push 进数组。

代码如下：

dom结构：

<label for="imgFile">请上传图片：</label><input id="imgFile" type="file" accept="image/jpeg,image/png,image/gif" /><br>
<img id="imgShow" src="" alt="" />  <!-- 展示用图片 -->
<canvas id="myCanvas"></canvas>
<div id="btnBox">
　　<button id="upBtn">上传</button>
</div>
<img id="treatmentImg" src="" alt="" /> <!-- canvas处理后图片 -->

js代码如下：

// ele 上传图片input
function imgUp(ele){
    var file = ele.files[0],imgShow = document.getElementById('imgShow'),imgData = [],btnBox = document.getElementById('btnBox');
    // 实例化fileReader对象
    var reader = new FileReader();
    // 调用readAsDataURL方法
    reader.readAsDataURL(file);
    reader.onload = function(e){
        // 获取图片base64编码
        var result = this.result;
        // 给压缩前图片赋值src
        imgShow.src = result;
        // 实例化一个img对象并赋值src
        var img = new Image();
        img.src = result;
        // 获取上传图片的文件大小
        var imgSize = file.size/1024;
        if(imgSize>1000){
            img.onload = function(){
                // 图片原始尺寸，压缩后最大宽高，canvas宽高，尺寸压缩比例
                var w = this.width,h = this.height,maxWidth = 800,maxHeight = 600,canW,canH,proportion;
                // 判断图片尺寸是否大于限定尺寸
                if(w>maxWidth||h>maxHeight){
                    if(w>h){
                        // 图片是宽大于高的
                            canW = maxWidth;
                            proportion = w/maxWidth;
                            canH = h/proportion;
                    }else if(w<h){
                        // 图片是宽大于高的
                            canH = maxHeight;
                            proportion = h/maxHeight;
                            canW = w/proportion;
                    }
                }else{
                    canW = w;
                    canH = h;
                }
                canvas = document.getElementById('myCanvas'),   
                ctx = canvas.getContext('2d'); 
                canvas.width = canW;   
                canvas.height = canH;    
                ctx.drawImage(img, 0, 0, canW,canH); 
                var result = canvas.toDataURL("image/png",0.9);
                imgData.push(data);
                upBtn.style.display = "block";
            };
        }else{
            imgData.push(result);
            upBtn.style.display = "block";
        }
    };
    return imgData;
};

var imgFile = document.getElementById('imgFile'),treatmentImg = document.getElementById('treatmentImg'),mydata = [],upBtn = document.getElementById('upBtn');
// 用户上传图片
imgFile.onchange = function(){
    mydata = imgUp(imgFile);
};
// 上传按钮点击
upBtn.onclick = function(){
    console.log(mydata);
    treatmentImg.src = mydata[0];
};

如有表述不准确之处，欢迎指正，欢迎补充，感谢阅读。