完成图片压缩

pages/faceSearch/faceSea.vue

@@ -92,7 +92,6 @@ export default {
 
   methods: {
     ...mapMutations(["getPosition", "getUserData"]), //vuex.mutations
-
     //拍照控件变重拍上传控件
     takeToReset() {
       this.isShow1 = !this.isShow1;
@@ -108,6 +107,7 @@ export default {
       this.isShow2 = !this.isShow2;
       this.photo();
     },
+
     //照片
     photo() {
       let that = this;
@@ -117,37 +117,100 @@ export default {
         sourceType: ["camera"],
         sizeType: ["compressed"],
         success: (res) => {
+          //压缩所选图片
+          // let path = res.tempFilePaths[0]; //压缩图路径
+          // let targetWidth = 150;
+          // let targetHeight = 200;
+          // let ctx = uni.createCanvasContext("canvas");
+          // ctx.drawImage(path, 0, 0, 300, 400); //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.imgPath = res.tempFilePaths[0]; //这就是要的blod
           uni.getSystemInfo({
             success: function (res2) {
-              that.maxWidth = res2.screenWidth;
-
+              that.maxWidth = res2.windowWidth;
               let base = 4 / 3;
-
               that.maxHeight = that.maxWidth * base;
+              //判断设备机型
+              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,
+                  0,
+                  that.maxWidth,
+                  that.maxHeight
+                ); //苹果机图片显示
+                canvas.draw();
+                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);
+                    that.$store.state.imageBase = path1;
+                    // that.toBase64(path1); //转base64图片
+                  },
+                });
+                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); //安卓机图片绘制
+              }
             },
           });
-
-          that.imgPath = res.tempFilePaths[0]; //这就是要的blod
-
-          that.toBase64(that.imgPath); //转base64图片
-
-          //图片显示
-          if (that.tipFlag == "ios") {
-            let canvas = uni.createCanvasContext("canvas");
-
-            canvas.drawImage(that.imgPath, 0, 0, that.maxWidth, that.maxHeight);
-
-            canvas.draw();
-
-            this.takeToReset(); //图片显示后显示重拍控件
-          } else {
-            that.detail(that.imgPath);
-          }
         },
       });
     },
-
     //安卓机图片修正
     async detail(url) {
       let Orientation = 1;
@@ -182,7 +245,6 @@ export default {
           break;
       }
     },
-
     async comprossImage(imgSrc, func) {
       if (!imgSrc) return 0;
       return new Promise((resolve, reject) => {
@@ -201,7 +263,6 @@ export default {
         });
       });
     },
-
     getImageTag(file, tag, suc) {
       if (!file) return 0;
       return new Promise((resolve, reject) => {
@@ -222,7 +283,6 @@ export default {
         });
       });
     },
-
     rotateImg(img, direction, canvas, times = 1) {
       // console.log("开始旋转");
       //最小与最大旋转方向，图片旋转4次后回到原方向
@@ -264,6 +324,21 @@ export default {
           ctx.rotate(degree);
           ctx.drawImage(img.src, 0, -height, width, height);
           ctx.draw();
+          uni.canvasToTempFilePath({
+            width: maxHeight,
+            height: maxWidth,
+            destWidth: maxHeight,
+            destHeight: maxWidth,
+            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图片
+            },
+          });
           this.takeToReset();
           break;
         case 2:
@@ -273,6 +348,21 @@ export default {
           ctx.rotate(degree);
           ctx.drawImage(img.src, -width, -height, width, height);
           ctx.draw();
+          uni.canvasToTempFilePath({
+            width: maxWidth,
+            height: maxHeight,
+            destWidth: maxWidth,
+            destHeight: 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图片
+            },
+          });
           this.takeToReset();
           break;
         case 3:
@@ -282,6 +372,21 @@ export default {
           ctx.rotate(degree);
           ctx.drawImage(img.src, -width, 0, width, height);
           ctx.draw();
+          uni.canvasToTempFilePath({
+            width: maxHeight,
+            height: maxWidth,
+            destWidth: maxHeight,
+            destHeight: maxWidth,
+            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图片
+            },
+          });
           this.takeToReset();
           break;
         default:
@@ -290,6 +395,21 @@ export default {
           height = maxHeight;
           ctx.drawImage(img.src, 0, 0, width, height);
           ctx.draw();
+          uni.canvasToTempFilePath({
+            width: maxWidth,
+            height: maxHeight,
+            destWidth: maxWidth,
+            destHeight: 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图片
+            },
+          });
           this.takeToReset();
           break;
       }