bugfix 新增压缩方法

common/compressPhoto.js

@@ -1,30 +1,36 @@
 //通过canvas将图片压缩至指定大小
 
 //判断图片大小是否满足需求,limitSize的单位是kb
-function imageSizeIsLessLimitSize(imagePath,limitSize,lessCallback,moreCallback){
-    console.log('------imagePath,limitSize,lessCallback,moreCallback', imagePath,limitSize,lessCallback,moreCallback)
-    //获取文件信息
-    wx.getFileSystemManager().getFileInfo({
-      filePath: imagePath,
-      success:(res)=>{
-        // console.log("压缩前图片大小",res, res.size/1024,'kb');
-        if(res.size > 1024*limitSize){
-          moreCallback()
-        } else {
-          lessCallback()
-        }
+function imageSizeIsLessLimitSize(
+  imagePath,
+  limitSize,
+  lessCallback,
+  moreCallback
+) {
+  //获取文件信息
+  wx.getFileSystemManager().getFileInfo({
+    filePath: imagePath,
+    success: (res) => {
+      console.log("压缩前图片大小", res, res.size / 1024, "kb");
+      if (res.size > limitSize) {
+        moreCallback();
+      } else {
+        lessCallback();
       }
-    })
-  }
-  
-  //将图片画在画布上并获取画好之后的图片的路径
-  function getCanvasImage(canvasId,imagePath,imageW,imageH,getImgSuccess){
-    //创建画布内容
-    const ctx = wx.createCanvasContext(canvasId)
-    //图片画上去，imageW和imageH是画上去的尺寸，图像和画布间隔都是0
-    ctx.drawImage(imagePath, 0, 0, imageW, imageH);
-    //这里一定要加定时器，给足够的时间去画（所以每次递归最少要耗时200ms，多次递归很耗时！）
-    ctx.draw(false, setTimeout(() => {
+    },
+  });
+}
+
+//将图片画在画布上并获取画好之后的图片的路径
+function getCanvasImage(canvasId, imagePath, imageW, imageH, getImgSuccess) {
+  //创建画布内容
+  const ctx = wx.createCanvasContext(canvasId);
+  //图片画上去，imageW和imageH是画上去的尺寸，图像和画布间隔都是0
+  ctx.drawImage(imagePath, 0, 0, imageW, imageH);
+  //这里一定要加定时器，给足够的时间去画（所以每次递归最少要耗时200ms，多次递归很耗时！）
+  ctx.draw(
+    false,
+    setTimeout(() => {
       //把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径
       wx.canvasToTempFilePath({
         canvasId: canvasId,
@@ -33,66 +39,163 @@ function imageSizeIsLessLimitSize(imagePath,limitSize,lessCallback,moreCallback)
         width: imageW,
         height: imageH,
         quality: 1, // 取0-1,1最高质量
-        fileType: 'jpg',
-        success:(res)=>{
+        fileType: "jpg",
+        success: (res) => {
+          console.log(res, 989898);
           //将取出的图片路径通过回调函数返回
           getImgSuccess(res.tempFilePath);
-        }
-      })
-    },200));
-  }
-  
-  //主函数，默认限制大小2048kb即2mb,drawWidth是绘画区域的大小
-  //初始值传入为画布自身的边长（我们这是一个正方形的画布）
-  function getLessLimitSizeImage(canvasId, imagePath, limitSize=1024, drawWidth, callback) {
-    //判断图片尺寸是否满足要求
-    imageSizeIsLessLimitSize(imagePath,limitSize,
-      (lessRes)=>{
-        //满足要求走callback，将压缩后的文件路径返回
-        console.log('满足要求走callback:', imagePath)
-        callback(imagePath);
-      },
-      (moreRes)=>{
-        //不满足要求需要压缩的时候
-        wx.getImageInfo({
-          src: imagePath,
-          success:(imageInfo)=>{
-            let maxSide = Math.max(imageInfo.width,imageInfo.height);
-            let windowW = drawWidth
-            let scale=1;
-            /*
+        },
+      });
+    }, 200)
+  );
+}
+
+//主函数，默认限制大小2048kb即2mb,drawWidth是绘画区域的大小
+//初始值传入为画布自身的边长（我们这是一个正方形的画布）
+function getLessLimitSizeImage(
+  canvasId,
+  imagePath,
+  limitSize = 1024,
+  drawWidth,
+  callback
+) {
+  //判断图片尺寸是否满足要求
+  imageSizeIsLessLimitSize(
+    imagePath,
+    limitSize,
+    (lessRes) => {
+      //满足要求走callback，将压缩后的文件路径返回
+      console.log("满足要求走callback:", imagePath);
+      callback(imagePath);
+    },
+    (moreRes) => {
+      //不满足要求需要压缩的时候
+      wx.getImageInfo({
+        src: imagePath,
+        success: (imageInfo) => {
+          let maxSide = Math.max(imageInfo.width, imageInfo.height);
+          let windowW = drawWidth;
+          let scale = 1;
+          /*
             这里的目的是当绘画区域缩小的比图片自身尺寸还要小的时候
             取图片长宽的最大值，然后和当前绘画区域计算出需要放缩的比例
             然后再画经过放缩后的尺寸，保证画出的一定是一个完整的图片。由于每次递归绘画区域都会缩小，
             所以不用担心scale永远都是1绘画尺寸永远不变的情况，只要不满足压缩后体积的要求
             就会缩小绘画区域，早晚会有绘画区域小于图片尺寸的情况发生
             */
-            if(maxSide>windowW){
-              scale = windowW/maxSide
-            }
-            //trunc是去掉小数
-            let imageW = Math.trunc(imageInfo.width*scale)
-            let imageH = Math.trunc(imageInfo.height*scale)
-            // console.log('调用压缩',imageW,imageH);
-            //图片在规定绘画区域上画并获取新的图片的path
-            getCanvasImage(canvasId,imagePath,imageW,imageH,
-              (pressImgPath)=>{
-                /*
+          if (maxSide > windowW) {
+            scale = windowW / maxSide;
+          }
+          //trunc是去掉小数
+          let imageW = Math.trunc(imageInfo.width * scale);
+          let imageH = Math.trunc(imageInfo.height * scale);
+          // console.log('调用压缩',imageW,imageH);
+          //图片在规定绘画区域上画并获取新的图片的path
+          getCanvasImage(
+            canvasId,
+            imagePath,
+            imageW,
+            imageH,
+            (pressImgPath) => {
+              /*
                 再去检查是否满足要求，始终缩小绘画区域，让图片适配绘画区域
                 这里乘以0.95是必须的，如果不缩小绘画区域，会出现尺寸比绘画区域小，
                 而体积比要求压缩体积大的情况出现，就会无穷递归下去，因为scale的值永远是1
                 但0.95不是固定的，你可以根据需要自己改，0到1之间，越小则绘画区域缩小的越快
                 但不建议取得太小，绘画区域缩小的太快，压出来的将总是很糊的
                 */
-                getLessLimitSizeImage(canvasId,pressImgPath,limitSize,drawWidth*0.95,callback);
-              }
-            )
-          }
-        })
+              getLessLimitSizeImage(
+                canvasId,
+                pressImgPath,
+                limitSize,
+                drawWidth * 0.95,
+                callback
+              );
+            }
+          );
+        },
+      });
+    }
+  );
+}
+function compressWx(url, quality, cb) {
+  //不满足要求需要压缩的时候
+  wx.getImageInfo({
+    src: url,
+    success: (imageInfo) => {
+      let maxSide = Math.max(imageInfo.width, imageInfo.height);
+      let windowW = drawWidth;
+      let scale = 1;
+      if (maxSide > windowW) {
+        scale = windowW / maxSide;
       }
-    )
+      //trunc是去掉小数
+      let imageW = Math.trunc(imageInfo.width * scale);
+      let imageH = Math.trunc(imageInfo.height * scale);
+      //创建画布内容
+      const ctx = wx.createCanvasContext(canvasId);
+      //图片画上去，imageW和imageH是画上去的尺寸，图像和画布间隔都是0
+      ctx.drawImage(imagePath, 0, 0, imageW, imageH);
+      //这里一定要加定时器，给足够的时间去画（所以每次递归最少要耗时200ms，多次递归很耗时！）
+      ctx.draw(
+        false,
+        setTimeout(() => {
+          //把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径
+          wx.canvasToTempFilePath({
+            canvasId: canvasId,
+            x: 0,
+            y: 0,
+            width: imageW,
+            height: imageH,
+            quality: quality, // 取0-1,1最高质量
+            fileType: "jpg",
+            success: (res) => {
+              cb(res.tempFilePath);
+            },
+          });
+        }, 200)
+      );
+    },
+  });
+}
+function compressH5(url, quality, cb) {
+  let image = new Image();
+  image.onload = function () {
+    var h = this.height * (quality / 1); // 默认按比例压缩
+    var w = this.width * (quality / 1);
+    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(image, 0, 0, w, h); //压缩比例
+    var base64 = canvas.toDataURL("image/jpeg", quality);
+    cb(base64);
+  };
+  image.src = url;
+  image.setAttribute("crossOrigin", "Anonymous");
+  image.onerror = () => {
+    reject(new Error("urlToBase64 error"));
+  };
+}
+function myCompressImage(url, limitSize = 2048, cb) {
+  limitSize = limitSize * 1024;
+  const size = url.size;
+  if (size < limitSize) {
+    return cb(url);
   }
-  
-  export default getLessLimitSizeImage
-  
-  
+  const quality = limitSize / size;
+  // #ifdef MP-WEIXIN
+  let canvasId = "zipCanvas";
+  let drawWidth = wx.getSystemInfoSync().windowWidth;
+  getLessLimitSizeImage(canvasId, url.path, limitSize, drawWidth, cb);
+  // #endif
+  // #ifdef H5
+  compressH5(url.path, quality, cb);
+  // #endif
+}
+
+export default myCompressImage;

pages2/verify/input.vue

@@ -1406,6 +1406,19 @@ export default {
           lists[0].file.type === "image/jpg";
         // #endif
         if (isJPG) {
+          // myCompressImage(lists[0].file, 100, async (url) => {
+          //   if (index == 1) {
+          //     url = await this.$method.uploadFile(url, 0);
+          //     this.$set(this.form, "recent_photos", url);
+          //   } else {
+          //     this.$refs[key][0].remove(0);
+          //     let titleMsg =
+          //       "请上传正确清晰的身份证" +
+          //       (index == 2 ? "人像" : "国徽") +
+          //       "面照片";
+          //     this.checkIdCard(index - 1, url, titleMsg, key);
+          //   }
+          // });
           let size = lists[0].file.size;
           if (size < 2 * 1024 * 1024) {
             this["fileList" + index] = lists;