前端压缩图片后上传，图片压缩

jquery图片压缩后上传（layui文件上传）

项目需求：表单内选择图片上传，图片要在前端压缩后传给后端

如下图所示：

仅展示图片上传部分代码：

HTML：我这里是用了layui的表单

<!--银行卡照片-->
<div class="layui-form-item" id="bank_card_image_box">
    <label class="layui-form-label">银行卡照片：</label>
    <div class="layui-upload">
        <button type="button" class="layui-btn">
            <input type="file" id="bank_card_image">
            选择图片
        </button>
        <button type="button" class="layui-btn" id="bank_card_image_uploading">开始上传</button>
        <div class="layui-upload-list">
            <img class="layui-upload-img" id="bank_card_image_img" data_src="">
            <p id="bank_card_imageText"></p>
        </div>
        <p class="tips">tips：记得点击上传按钮哦~</p>
    </div>
</div>

此处有个小技巧：input type=“file” 的样式很难改变，我这里用了一个button包着input，给input一个绝对定位以及opacity=0，button标签放在input的位置上，实际点击的还是input

css代码：input type="file"样式

button.layui-btn {
     position: relative;
     overflow: hidden;
 }
 button.layui-btn input {
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     opacity: 0;
 }

js代码：压缩后的图片转化为base64格式再传给后端

此处压缩图片是核心代码

Check_Compress('bank_card_image','bank_card_image_img');
 //压缩图片
function Check_Compress(elem,img_id) {
    var bili = 0.7;//压缩后的图片尺寸,0.7就是70%
    var quality = 0.7;//压缩后图片的质量,数字越小图片越模糊
    $(function () {
        $("#"+elem).on('change',function () {
            var file = this.files[0];
            // console.log(file);
            var ready = new FileReader();
            ready.readAsDataURL(file);
            ready.onload = function (e) {
                var base64Img = e.target.result;
                compress(img_id,base64Img)//执行压缩
            }
        })
    });
    function compress(img_id,base64Img) {
        var img = new Image();//创建一个空白图片对象
        img.src = base64Img;//图片对象添加图片地址
        img.onload = function(){  //图片地址加载完后执行操作
            var newWidth = img.width*bili;//压缩后图片的宽度
            var newHeight = img.height*bili;//压缩后图片的高度
            //开始画压缩图
            var canvas = document.createElement("canvas");
            var ctx = canvas.getContext("2d");
            canvas.width = newWidth;//压缩图的宽度
            canvas.height = newHeight;//压缩图的高度
            ctx.drawImage(img,0,0,newWidth,newHeight);
            var newBase64 = canvas.toDataURL("image/jpeg",quality);
            //压缩后预览
            $('#'+img_id).attr('src',newBase64); //图片链接（base64）
        }
    }
}

以下是layui的文件上传

UploadImg('bank_card_image','bank_card_image_uploading','bank_card_image_img','bank_card_imageText');
//上传图片接口
function UploadImg(elem,bindAction,img,text) {
    var uploadInst = upload.render({
        elem: '#'+elem
        ,url: 'uploadImg'
        ,accept: 'file' //普通文件
        ,auto: false
        // ,size:1024
        ,bindAction: '#'+bindAction
        ,data: {
            img: function(){
                var arr = $('#'+img).attr('src');
                var strArray = arr.split(',');  //分割base64字符串
                return strArray[1];
            }
        }
        ,done: function(res){
            // console.log(res);
            //上传成功
            if (res.status == 1) {
                layer.msg(res.msg);
                $('#'+img).attr('data_src',res.data); //图片链接（base64）
            }else if(res.status == 0){  //如果上传失败
                return layer.msg(res.msg);
            }
        }
        ,error: function(){
            //失败状态，并实现重传
            var demoText = $('#'+text);
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function(){
                uploadInst.upload();
            });
        }
    });
}