diff --git a/src/views/Guidance.vue b/src/views/Guidance.vue index 11e74ed..f1df443 100644 --- a/src/views/Guidance.vue +++ b/src/views/Guidance.vue @@ -14,7 +14,9 @@
头像采集
上传近期半身本人照片
-
上传照片
+ +
上传照片
+
去预约
@@ -85,12 +87,8 @@ export default { this.$toast('头像只能选择一张'); } else { - // if (this.calcBaseSze(data.picPath[0]) > 1024) { - - // } else { - // this.avatar = 'data:image/jpg;base64,' + data.picPath[0]; - // } - //保存采集头像 + // this.compress(data.picPath[0]); + // //保存采集头像 let avatar = 'data:image/jpg;base64,' + data.picPath[0]; this.saveCupImg(avatar); } @@ -114,7 +112,7 @@ export default { let retData = JSON.parse(value); if (retData.code == 200) { this.$toast('采集成功'); - this.avatar = avatar; + this.avatar = vatar; } else { this.$toast(retData.msg); } @@ -139,11 +137,34 @@ export default { this.$toast.clear(); } }, - //计算base64图形大小 - calcBaseSze(base64) { - const kb = Math.ceil(parseInt(base64.length - (base64.length / 8) * 2) / 1024); - console.log('chooseimage', base64.length / 1024, kb); - return kb; + //图片压缩 + compress(base64) { + var newImage = new Image(); + var quality = 0.6; //压缩系数0-1之间 + newImage.src = 'data:image/jpg;base64,' + base64; + newImage.setAttribute("crossOrigin", 'Anonymous'); //url为外域时需要 + newImage.onload = () => { + var canvas = document.createElement("canvas"); + var ctx = canvas.getContext("2d"); + canvas.width = 700; + canvas.height = 920; + quality = 0.7; + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.drawImage(newImage, 0, 0, canvas.width, canvas.height); + var compressBase64 = canvas.toDataURL("image/jpeg", quality); //压缩语句 + // 如想确保图片压缩到自己想要的尺寸,如要求在50-150kb之间,请加以下语句,quality初始值根据情况自定 + // while (base64.length / 1024 > 150) { + // quality -= 0.01; + // base64 = canvas.toDataURL("image/jpeg", quality); + // } + // 防止最后一次压缩低于最低尺寸,只要quality递减合理,无需考虑 + // while (base64.length / 1024 < 50) { + // quality += 0.001; + // base64 = canvas.toDataURL("image/jpeg", quality); + // } + //保存采集头像 + this.saveCupImg(compressBase64); + } }, //须知详情 queryAticle(id) { @@ -185,10 +206,13 @@ export default { }, //已阅读 doRead() { + // this.isShowAvatar = true; + // return; //校验是否已采集头像 if (this.avatar == '') { this.isShowAvatar = true; } else { + this.isShowAvatar = false; this.$router.replace({ name: 'examination', query: { id: this.$route.query.deptId } }); } // let readBox = this.$refs.scrollView; @@ -304,7 +328,7 @@ export default { img { width: 2.4rem; - height: 2.4rem; + height: 2.7rem; margin-top: 0.6rem; } } diff --git a/vue.config.js b/vue.config.js index 8b39eee..6727f25 100644 --- a/vue.config.js +++ b/vue.config.js @@ -9,8 +9,8 @@ module.exports = defineConfig({ proxy: { "/api": { //本地服务接口地址 - // target: "http://192.168.1.3:8080", - target: "http://192.168.1.106", + target: "http://192.168.1.3:8080", + // target: "http://192.168.1.106", //远程演示服务地址,可用于直接启动项目 // target: 'https://saber.bladex.vip/api', ws: true,