web前端实现图片压缩处理

<!--存放页面内容的dom节点-->
<div class="weui-cell__bd weui-uploader__bd">
    <ul class="weui-uploader__files" id="uploaderFiles">                
    <!--图片存放区域--> 
    </ul>
    <!--上传按钮-->
    <div class="weui-uploader__input-box">
        <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple />
    </div>
</div>

// 图片数组 以下为具体的功能实现js

 var imgarr=[];

 // 点击添加图片

 $("#uploaderInput").on("change",function () {
 //获取所选图片的列表对象
    var fileimg=this.files; 
 //查看已经选择的图片数量
    var arrnum=imgarr.length;
 //获取所有图片的数量
    var num=arrnum+fileimg.length;
//我们这里是限制了三张
    if(num>3){
     //该处借用了layerjs的弹出层模块
        layer.msg("最多上传三张图片");

        return false;

    }
//循环取出本次选择的图片
    for(var i =0;i<fileimg.length;i++){    

        /*图片转Base64 核心代码*/  

        var file = fileimg[i];  

        //这里我们判断下类型如果不是图片就返回中断上传，也可以continue直接过滤掉该文件
        if (!/image\/\w+/.test(file.type)) {  
            layer.msg("请确保文件为图像类型");  
            return false;  
        }  
        //创建一个文件读取的工具类
        var reader = new FileReader(); 
        //这里利用了闭包的特性，来保留文件名
        (function(x){
                reader.onload = function (e) {
                //将读取到图片流直接拼接起来
                var str='<li class="weui-uploader__file " style="background-image:url('+this.result+')"><span class="remove" style="color:red">X</span></li>';
                //塞到页面节点里                    
                $("#uploaderFiles").append(str);
                //调用压缩文件的方法，具体实现逻辑见下面
                render(this.result,x);
                }  

        })(file.name) 
       //告诉文件读取工具类读取那个文件
        reader.readAsDataURL(file);  
    }
 })  

//设置压缩图片的最大高度
     var MAX_HEIGHT = 1000;
function render(src,picname) {
    // 创建一个 Image 对象
    var image = new Image();
    // 绑定 load 事件处理器，加载完成后执行
    image.onload = function() {
        // 获取 canvas DOM 对象
        var canvas = document.createElement("canvas");
        // 如果高度超标
        if (image.height > MAX_HEIGHT && image.height >= image.width) {
            // 宽度等比例缩放 *=
            image.width *= MAX_HEIGHT / image.height;
            image.height = MAX_HEIGHT;
        }
       //考录到用户上传的有可能是横屏图片同样过滤下宽度的图片。
        if (image.width > MAX_HEIGHT && image.width > image.height) {
            // 宽度等比例缩放 *=
            image.height *= MAX_HEIGHT / image.width;
            image.width = MAX_HEIGHT;
        }

        // 获取 canvas的 2d 画布对象,
        var ctx = canvas.getContext("2d");
        // canvas清屏，并设置为上面宽高
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        // 重置canvas宽高
        canvas.width = image.width;
        canvas.height = image.height;
        // 将图像绘制到canvas上
        ctx.drawImage(image, 0, 0, image.width, image.height);
        // !!! 注意，image 没有加入到 dom之中
//        document.getElementById('img').src = canvas.toDataURL("image/png");
        var blob = canvas.toDataURL("image/jpeg");
//将转换结果放在要上传的图片数组里
        imgarr.push({"pic":blob,"pic_name":picname});
    };
    image.src = src;
};
//到这里我们图片压缩的代码就结束了。我们再加上，一个事件控制把需要上传的图片数组传给后台就行啦。


$.ajax({
   "url":"",
   "type":"post"
   "dataType":"json",
   "data":{"pic":imgarr},
   "success":function(res){}
});