jqWEUI对图片压缩并上传

jqWEUI样式，加图片上传到页面并预览

-------------------------------------------------

补充：增加了图片压缩js  2018年6月29日

--------------------------------------------------

1、首先介绍下背景：项目最近更新，增加了些功能，其中用到了上传图片。由于是微信端而且用到了WEUI，去jqWEUI官网翻了翻，找到了一些挺实用的样式，但是没有对应的js组件。于是决定自己搞一个，由于功能比较简单所以可能考虑的不是很全面，程序吗，肯定会有bug，先把目前的样式贴出来：

效果如上，选择图片点击打开，预览出展示当前选择的图片。再次点击预览图片放大到全屏，可以选择删除。再重新上传。

jqWEUi版本的话全部引用的官网cdn

<!-- head 中 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">

<!-- body 最后 -->
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>

代码如下：

    //css部分
    <style>
        ul,li{
            list-style: none;
            margin:0;
            padding: 0;
        }
        ul{
            width:100%;
            display: flex;
            justify-content: space-evenly;
            font-size: .5rem;
        }
        li{
            text-align: center;
        }
        li>div{
            display: inline-block;
            position: relative;
        }
        .hide{
            display: none;
        }
    </style>

    //html
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">证件照片：</label></div>
        <div class="weui-cell__bd">
            <ul>
                <li imgNum="1"> //此处的imgNum可以填写需要的字段 不一定是数字
                    //图片选择input
                    <div class="weui-uploader__input-box">
                        <input class="weui-uploader__input"  type="file" accept="image/*" multiple="">
                    </div>
                    <div class="add_img weui-uploader__file hide"></div>//预览div
                    <p>身份证照片</p>//文字介绍
                </li>
            </ul>
        </div>
        //图片全屏预览
        <div class="weui-gallery" id="modal">
            <!--照片查看-->
            <span class="weui-gallery__img" ></span>
            <input type="hidden">
            <div class="weui-gallery__opr">
                <a href="javascript:" class="weui-gallery__del">
                    <i class="weui-icon-delete weui-icon_gallery-delete"></i>
                </a>
            </div>
        </div>
    </div>

    //js
    "use strict"
    /*
    * 设置微信端上传图片
    * */
    class getImgData{
        constructor(){
            this.imgData = {};
            this.init();
        }
        init(){
            let that = this;
            //绑定选择
            that.bingChange();
            //绑定显示图片
            that.viewImg();
            //绑定删除图片
            that.deleteImg();
            //点击span时缩小
            $("#modal span").click(()=>{
                $("#modal").hide();
            })
        }
        bingChange(){
            let that = this;
            $("input[type=file]").change(function(){
                let reader = new FileReader();
                reader.onload = evt => {
                     //如果文件大于1M压缩图片   图片压缩
                    console.log("压缩前"+that.showSize(evt.target.result)+"kb")
                    if(this.files[0].size > 1*1024*1024){
                        that.dealImage(evt.target.result,{w:"500",h:"500",quality:0.5},res => {
                            console.log("压缩后"+that.showSize(res)+"kb")
                            that.setImg($(this).parents("li").attr("imgNum"),{
                                "base64":res,
                                "file":this.files[0]
                            });
                        })
                    }else{
                        that.setImg($(this).parents("li").attr("imgNum"),{
                            "base64":evt.target.result,
                            "file":this.files[0]
                        });
                    }
                }
                reader.readAsDataURL(this.files[0]);
            })
        }
        viewImg(){
            $("div.add_img").click(function(){
                $("#modal").show().find("span").css("backgroundImage",$(this).css("backgroundImage")).attr("imgNum",$(this).parents("li").attr("imgNum"));
            })
        }
        deleteImg(){
            let that = this;
            $(".weui-gallery__del").click(()=>{
                $.confirm("您确定要删除该张照片吗", "确认删除?", function() {
                    that.setImg($("#modal span").attr("imgNum"))
                    $("#modal").hide();
                    $.toast("图片已经删除!");
                }, function() {
                    //取消操作
                );
            })
        }
        setImg(imgNum,data){
            // imgNum 每个li的imgNum标识  data 图片路径
            if(data && data['base64']){
                this.imgData["data_"+imgNum] = {
                    'base64' : data.base64 ,
                    'file' : data.file
                };
                $("li[imgNum = "+ imgNum +"]").find(".weui-uploader__input-box").hide().next(".add_img").show().css("backgroundImage",`url(${data['base64']})`);
            }else{
                this.imgData["data_"+imgNum] = null;
                $("li[imgNum = "+ imgNum +"]").find(".weui-uploader__input-box").show().next(".add_img").css("backgroundImage","").hide();
            }
        }
        getImg(){
            //调用此方法可以拿到保存的图片数组
            return this.imgData
        }
        dealImage(path, obj, callback){
            //压缩img  path 图片路径 obj{w:压缩后图片宽,h:压缩后图片高,quality:图片质量}
            var img = new Image();
            img.src = path;
            img.onload = function(){
                var that = this;
                // 默认按比例压缩
                var w = that.width,
                    h = that.height,
                    scale = w / h;
                w = obj.width || w;
                h = obj.height || (w / scale);
                var quality = 0.5;  // 默认图片质量为0.5
                //生成canvas
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                // 创建属性节点
                var anw = document.createAttribute("width");
                anw.nodeValue = w;
                var anh = document.createAttribute("height");
                anh.nodeValue = h;
                canvas.setAttributeNode(anw);
                canvas.setAttributeNode(anh);
                ctx.drawImage(that, 0, 0, w, h);
                // 图像质量
                if(obj.quality && obj.quality <= 1 && obj.quality > 0){
                    quality = obj.quality;
                }
                // quality值越小，所绘制出的图像越模糊
                var base64 = canvas.toDataURL('image/jpeg', quality );
                // 回调函数返回base64的值
                callback(base64);
            }
        }
        showSize(base64url) {
            //获取base64图片大小，返回KB数字
            var str = base64url.replace('data:image/png;base64,', '');
            var equalIndex = str.indexOf('=');
            if(str.indexOf('=')>0) {
                str=str.substring(0, equalIndex);
            }
            var strLength=str.length;
            var fileLength=((strLength-(strLength/8)*2)/1024).toFixed(1);
            return fileLength;
        }
    }

     var imgData = new getImgData();
        $(".submit").click(()=>{
            console.log(imgData.getImg())
        })

老版本的发现上传的图片过大，用户体验非常差所以新增了图片压缩这一步。git地址：jqWeUi图片上传