Sfoglia il codice sorgente

图片压缩,布局适配

李海聪 4 anni fa
parent
commit
da00a35fde

+ 1 - 1
pages/confirm/confirm.vue

@@ -33,7 +33,7 @@ export default {
       idnum: "", //学号或身份证号
     };
   },
-  created() {
+  onLoad() {
     this.name = this.$store.state.name;
 
     this.sex = this.$store.state.sex;

+ 6 - 2
pages/confirm/css/confirm.css

@@ -1,7 +1,11 @@
+page {
+  height: 100%;
+}
+
 .content {
   position: relative;
-  width: 750rpx;
-  height: 1334rpx;
+  width: 100%;
+  height: 100%;
   font-family: "MicrosoftYaHei";
   font-weight: 400;
   background-image: url(../../static/images/bg.png);

File diff suppressed because it is too large
+ 1 - 1
pages/confirm/css/confirm.min.css


+ 5 - 8
pages/confirm/css/confirm.scss

@@ -1,7 +1,10 @@
+page {
+    height: 100%;
+}
 .content {
     position: relative;
-    width: 750rpx;
-    height: 1334rpx;
+    width: 100%;
+    height: 100%;
     font-family: "MicrosoftYaHei";
     font-weight: 400;
     background-image: url(../../static/images/bg.png);
@@ -26,11 +29,9 @@
             height: 300rpx;
             margin-top: 50rpx;
             margin-left: 50rpx;
-
             .head {
                 display: flex;
                 justify-content: flex-start;
-
                 view {
                     width: 8rpx;
                     height: 30rpx;
@@ -38,7 +39,6 @@
                     margin-top: 12rpx;
                     margin-right: 19rpx;
                 }
-
                 text {
                     font-size: 32rpx;
                     font-weight: bold;
@@ -46,13 +46,11 @@
                     line-height: 54rpx;
                 }
             }
-
             .mes {
                 font-size: 28rpx;
                 line-height: 54rpx;
             }
         }
-
         .confirm {
             width: 322rpx;
             height: 80rpx;
@@ -65,7 +63,6 @@
             text-align: center;
             margin-top: 100rpx;
         }
-
         .footer {
             display: block;
             width: 578rpx;

+ 4 - 0
pages/faceSearch/css/faceSea.css

@@ -1,3 +1,7 @@
+page {
+  height: 100%;
+}
+
 .content {
   display: flex;
   flex-direction: column;

File diff suppressed because it is too large
+ 1 - 1
pages/faceSearch/css/faceSea.min.css


+ 3 - 4
pages/faceSearch/css/faceSea.scss

@@ -1,3 +1,6 @@
+page {
+    height: 100%;
+}
 .content {
     display: flex;
     flex-direction: column;
@@ -53,7 +56,6 @@
             z-index: 3;
         }
     }
-
     .controlField {
         width: 750rpx;
         // height: 334rpx;
@@ -73,13 +75,11 @@
                 margin-top: 40rpx;
                 text-align: center;
             }
-
             .take {
                 max-height: 150rpx;
                 max-width: 150rpx;
             }
         }
-
         .control2 {
             display: flex;
             justify-content: space-between;
@@ -88,7 +88,6 @@
             margin: 0 auto;
             //  margin-top: 130rpx;
             margin-top: 70rpx;
-
             view {
                 width: 170rpx;
                 height: 80rpx;

+ 3 - 35
pages/faceSearch/faceSea.vue

@@ -135,9 +135,10 @@ export default {
           //     },
           //   });
           // }),
+
           //绘制图片到页面
-          //获取设备屏幕尺寸
           that.imgPath = res.tempFilePaths[0]; //这就是要的blod
+          //获取设备屏幕尺寸
           uni.getSystemInfo({
             success: function (res2) {
               that.maxWidth = res2.windowWidth;
@@ -146,25 +147,6 @@ export default {
               //判断设备机型
               if (that.tipFlag == "ios") {
                 let canvas = uni.createCanvasContext("canvas");
-                // canvas.drawImage(that.imgPath, 0, 0, 150, 200); //x设置成1000是因为不让压缩图出现在屏幕
-                // canvas.draw(false, () => {
-                // canvas导出为图片路径
-                // uni.canvasToTempFilePath({
-                //   width: that.maxWidth,
-                //   height: that.maxHeight,
-                //   destWidth: that.maxWidth,
-                //   destHeight: that.maxHeight,
-                //   canvasId: "canvas",
-                //   fileType: "jpg", //支持jpg或png
-                //   quality: 1, //图片质量
-                //   success(res3) {
-                //     let path1 = res3.tempFilePath;
-                //     console.log(path1);
-                //     this.$store.state.imageBase = path1;
-                //     // that.toBase64(path1); //转base64图片
-                //   },
-                // });
-                // });
                 canvas.drawImage(
                   that.imgPath,
                   0,
@@ -190,20 +172,6 @@ export default {
                 });
                 that.takeToReset(); //图片显示后显示重拍控件
               } else {
-                // let ctx = uni.createCanvasContext("canvas");
-                // ctx.drawImage(that.imgPath, 0, 0, 150, 200); //x设置成1000是因为不让压缩图出现在屏幕
-                // ctx.draw(false, () => {
-                //   // canvas导出为图片路径
-                //   uni.canvasToTempFilePath({
-                //     canvasId: "canvas",
-                //     fileType: "jpg", //支持jpg或png
-                //     quality: 0.92, //图片质量
-                //     success(res3) {
-                //       let path1 = res3.tempFilePath;
-                //       that.toBase64(path1); //转base64图片
-                //     },
-                //   });
-                // }),
                 that.detail(that.imgPath); //安卓机图片绘制
               }
             },
@@ -223,11 +191,11 @@ export default {
       var img = null;
 
       var canvas = null;
+
       await this.comprossImage(url, function (e) {
         img = e.img;
         canvas = e.canvas;
       });
-
       //  console.log(Orientation,"Orientation")
       //如果方向角不为1,都需要进行旋转
       switch (Orientation) {

+ 1 - 7
pages/index/css/index.css

@@ -2,7 +2,7 @@ page{
 	height: 100%;
 }
 .container{
-	width: 750rpx;
+	width: 749rpx;
 	height: 100%;
 	background: #fff;
 }
@@ -15,7 +15,6 @@ page{
     background-attachment: fixed;
     background-repeat: no-repeat;
 }
-
 .item-title{
 	display: flex;
 	flex-direction: row;
@@ -23,13 +22,11 @@ page{
 	margin-top: 39rpx;
 	margin-left: 30rpx;
 }
-
 .item-title-line{
 	width: 10rpx;
 	height: 32rpx;
 	background-color: #3FB0FF;
 }
-
 .item-title-font{
 	font-size: 32rpx;
 	font-weight: 700;
@@ -37,7 +34,6 @@ page{
 	margin-left: 15rpx;
 	margin-top: -5rpx;
 }
-
 .item-list{
 	display: flex;
 	flex-direction: row;
@@ -46,7 +42,6 @@ page{
 	margin-top: 40rpx;
 	margin-left: 80rpx;
 }
-
 .item-list-one{
 	display: flex;
 	flex-direction: column;
@@ -54,7 +49,6 @@ page{
 	width: 150rpx;
 	margin-right: 80rpx;
 }
-
 .img-btn{
 	width: 90rpx;
 	height: 90rpx;