web前端实现图片压缩处理

链接地址：https://zhuanlan.zhihu.com/p/27823933

<!--存放页面内容的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){}
});