js 图片转base64码后 再对base64码进行压缩 然后传给后台 无限压缩 直到符合输出码率

kejiang

1 html

					<div>
                        <img
                            :src="url"
                            alt
                            class="el-upload-list__item-thumbnail"
                        />
                        <input
                            type="file"
                            @change="change($event)"
                            id="input"
                            accept="image/jpeg, image/png, image/gif"
                            ga-data="imoyao-enterprise-132"
                            class="inputfile"
                            capture="camera"
                        />
                    </div>
                     <div class="f2-sub_btn">
            <van-button
                type="primary"
                :disabled="disabled"
                block
                @click="gosign"
                >提交认证</van-button>
        	</div>

 //上传图片信息保存在数组中并且回显
        change(event) {
            let file = event.target.files[0];
            console.log(file.size);
            console.log("------22222---------");
            let windowURL = window.URL || window.webkitURL;
            //图片格式为PNG或JPG且小于5M
            if (/\.(jpg|jpeg|png|JPG|JPEG|PNG)$/.test(file.name)) {
                if (file) {
                    let dataURl = windowURL.createObjectURL(file);
                    file.url = dataURl;
                    this.url = dataURl;
                    this.getImgBase64(dataURl, "url");
                }
            } else {
                Toast({
                    message: "身份证格式为PNG或JPG",
                    position: "middle",
                    duration: 1500,
                });
            }
        },
        image2Base64(img,size = 0.9) {
            var canvas = document.createElement("canvas");
            canvas.width = img.width;
            canvas.height = img.height;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, img.width, img.height);
            let dataURL = canvas.toDataURL("image/jpeg", size);
            if (dataURL.length > 1000000) {//如果输出大于1m 就递归直到输出小于1M才行
                return this.image2Base64(img, (size / 2).toFixed(1) * 1);
            } else {
                console.log(dataURL);
                return dataURL;
            }
        },
        getImgBase64(src, flag) {
            var base64 = "";
            var img = new Image();
            img.src = src;
            let that = this;
            img.onload = function () {
                base64 = that.image2Base64(img);
                console.log(base64.length);
                console.log("==============");
                if (flag == "url") {
                    that.url = base64;
                } else {
                    that.urlfan = base64;
                }

                if (that.url.length > 500 && that.urlfan.length > 500) {
                    Toast.loading({
                        message: "提交中...",
                        forbidClick: true,
                        duration: 0,
                    });
                    that.post("/personal/realNameAuth", {
                        idCardFront: that.url,
                        idCardBack: that.urlfan,
                    }).then((res) => {
                        that.expiryDate = res.expiryDate;
                        that.licenceAuthority = res.licenceAuthority;
                        that.name = res.name;
                        that.idNo = res.idNo;
                        that.disabled = false;

                        that.post("/personal/realNamesAuth", {
                            name: that.name,
                            idNo: that.idNo,
                            sfzmocrplatsrl: res.sfzmocrplatsrl,
                        }).then((data) => {
                            Toast.clear();
                        });
                    });
                }
            };
        },