1

src/views/app/test.vue

@@ -1,157 +1,74 @@
 <template>
-  <div>
-    <van-uploader v-model="fileList"
-                  multiple
-                  :after-read="afterRead" />
-    <van-image width="100"
-               height="100"
-               :src="src" />
+  <div class="dome">
+    <div class="cropper">
+      <img :src="img" class="img" />
+      <!-- option是配置，格式是对象，getbase64Data是组件的一个方法获取裁剪完的头像 2.14新增一个获取getblobData的方法 -->
+      <h5-cropper :option="option" @getbase64Data="getbase64Data" @getblobData="getblobData" @getFile="getFile"></h5-cropper>
+    </div>
+    <div class="info">
+      <div>作者：居里栈栈</div>
+      <div>Wechat：812936565</div>
+    </div>
   </div>
 </template>
+
 <script>
-import Exif from 'exif-js'
+import H5Cropper from "vue-cropper-h5";
 export default {
-  name: 'PolicyContent',
-  components: {
-
-  },
-  data () {
+  components: { H5Cropper },
+  data() {
     return {
-      fileList: [],
-      src: ""
-    }
+      option: {
+        canScale: true,
+        outputSize: 0.6
+      }, //配置
+      img:
+        "http://geren.yi-school.top/images/logo.png"
+    };
   },
   methods: {
-    afterRead (file) {
-      let Orientation = null;
-      //获取照片方向角属性，用户旋转控制
-      var self = this;
-      Exif.getData(file.file, function () {
-        Exif.getAllTags(this);
-        Orientation = Exif.getTag(this, 'Orientation');
-        self.resetOrientation(file.content, Orientation, self.callbackBase64Img);
-      });
-    },
-    callbackBase64Img (callbackImg) {
-      var img = new Image();
-      var self = this
-      img.onload = function () {
-        self.src = self.compress(img)
-      }
-      img.src = callbackImg;
+    getbase64Data(data) {
+      this.img = data;
     },
-    resetOrientation (srcBase64, srcOrientation, callback) {
-      alert(srcOrientation)
-      var img = new Image();
-
-      img.onload = function () {
-        var width = img.width,
-          height = img.height,
-          canvas = document.createElement('canvas'),
-          ctx = canvas.getContext("2d");
-
-        // 可以设置最大大小
-        var MAX_WIDTH = 1024;
-        var MAX_HEIGHT = 768;
-        if (width / MAX_WIDTH > height / MAX_HEIGHT) {
-          if (width > MAX_WIDTH) {
-            height *= MAX_WIDTH / width;
-            width = MAX_WIDTH;
-          }
-        } else {
-          if (height > MAX_HEIGHT) {
-            width *= MAX_HEIGHT / height;
-            height = MAX_HEIGHT;
-          }
-        }
-        // set proper canvas dimensions before transform & export
-        if ([5, 6, 7, 8].indexOf(srcOrientation) > -1) {
-          canvas.width = height;
-          canvas.height = width;
-        } else {
-          canvas.width = width;
-          canvas.height = height;
-        }
-
-        // transform context before drawing image
-        switch (srcOrientation) {
-          case 2: ctx.transform(-1, 0, 0, 1, width, 0); break;
-          case 3: ctx.transform(-1, 0, 0, -1, width, height); break;
-          case 4: ctx.transform(1, 0, 0, -1, 0, height); break;
-          case 5: ctx.transform(0, 1, 1, 0, 0, 0); break;
-          case 6: ctx.transform(0, 1, -1, 0, height, 0); break;
-          case 7: ctx.transform(0, -1, -1, 0, height, width); break;
-          case 8: ctx.transform(0, -1, 1, 0, 0, width); break;
-          default: ctx.transform(1, 0, 0, 1, 0, 0);
-        }
-
-         // draw image
-        ctx.drawImage(img, 0, 0, width, height);
+    getblobData() {
 
-        // export base64
-        callback(canvas.toDataURL());
-      };
-
-      img.src = srcBase64;
-    },
-    compress (img) {
-      let canvas = document.createElement('canvas')
-      let ctx = canvas.getContext('2d')
-      //瓦片canvas
-      let tCanvas = document.createElement('canvas')
-      let tctx = tCanvas.getContext('2d')
-      //let initSize = img.src.length
-      let width = img.width
-      let height = img.height
-      //如果图片大于四百万像素，计算压缩比并将大小压至400万以下
-      let ratio
-      if ((ratio = (width * height) / 3500000) > 1) {
-        //console.log('大于400万像素')
-        ratio = Math.sqrt(ratio)
-        width /= ratio
-        height /= ratio
-      } else {
-        ratio = 1
-      }
-      canvas.width = width
-      canvas.height = height
-      //        铺底色
-      ctx.fillStyle = '#fff'
-      ctx.fillRect(0, 0, canvas.width, canvas.height)
-      //如果图片像素大于100万则使用瓦片绘制
-      let count
-      if ((count = (width * height) / 1000000) > 1) {
-        //console.log('超过100W像素')
-        count = ~~(Math.sqrt(count) + 1) //计算要分成多少块瓦片
-        // 计算每块瓦片的宽和高
-        let nw = ~~(width / count)
-        let nh = ~~(height / count)
-        tCanvas.width = nw
-        tCanvas.height = nh
-        for (let i = 0; i < count; i++) {
-          for (let j = 0; j < count; j++) {
-            tctx.drawImage(
-              img,
-              i * nw * ratio,
-              j * nh * ratio,
-              nw * ratio,
-              nh * ratio,
-              0,
-              0,
-              nw,
-              nh
-            )
-            ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh)
-          }
-        }
-      } else {
-        ctx.drawImage(img, 0, 0, width, height)
-      }
-      //进行最小压缩
-      let ndata = canvas.toDataURL('image/jpeg', 0.5)
-      tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0
-      return ndata
     },
-  },
+    getFile(file) {
+      console.log(file)
+    }
+  }
+};
+</script>
+
+<style scoped>
+.dome {
+  display: flex;
+  justify-content: space-between;
+  padding-left: 22px;
+}
+.cropper {
+  width: 80px;
+  height: 80px;
+  line-height: 80px;
+  /* 切记position: relative一定要有 */
+  position: relative;
+  border-radius: 80px;
+  overflow: hidden;
+  text-align: center;
+}
+.img {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+.info {
+  font-size: 18px;
+  height: 40px;
+  line-height: 40px;
+  margin-left: 30px;
+  flex: 1;
+  text-align: left;
 }
-</script>
+</style>

src/views/signup/SignUpBaseInfo.vue

@@ -8,12 +8,16 @@
         <van-field v-model="form.idCardNo" readonly required name="idCardNo" label="身份证号" placeholder="请输入身份证号" >
             <template #button>
                 <!-- <span class="codeText">上传</span> -->
-                <van-uploader :before-read="beforeRead2"
+                <!-- <van-uploader :before-read="beforeRead2"
                                 :after-read="afterReadOCR"
                                 accept="image/*"
                                 :max-count="1">
                     <span class="codeText">上传</span>
-                </van-uploader>
+                </van-uploader> -->
+                <div class="cropper">
+                    <span>上传</span>
+                    <h5-cropper :option="option" @getFile="getFile"></h5-cropper>
+                </div>
             </template>
         </van-field>
         <!-- <div class="cardTips">如有括号，请用英文括号()</div> -->
@@ -57,11 +61,12 @@ import MHeader from '@/components/MHeader'
 import MStep from '@/components/MStep'
 import MButton from '@/components/MButton'
 import setLoading from '@/utils/loading'
+import H5Cropper from 'vue-cropper-h5'
 import { getStudent, ocr, uploadFile, updateStudentInfo, getExamIngOrder, closeOrder } from './SignUpApi'
 import dayjs from 'dayjs'
 export default {
     name: 'signupBaseInfo',
-	components: { MHeader, MStep, MButton },
+	components: { MHeader, MStep, MButton, H5Cropper },
     data () {
         const examId = localStorage.getItem('examId')
         return {
@@ -76,6 +81,13 @@ export default {
                 certificatePhoto: null
             },
             fileList: [],
+            option: {
+                canScale: true,
+                autoCropWidth: 120,
+                autoCropHeight: 180,
+                fixedNumber: [2, 1]
+            }, //配置
+            img: "http://geren.yi-school.top/images/logo.png"
         }
     },
     mounted() {
@@ -89,6 +101,26 @@ export default {
         this.__init()
     },
     methods: {
+        async getFile(file) {
+            console.log(file)
+            setLoading(true)
+            try {
+                let formData = new FormData()
+                formData.append('file', file)
+                formData.append('idCardSide', "front")
+                let res = await ocr(formData)
+                let result = res.data
+                setLoading(false)
+                if(result.code == 200) {
+                    this.idCardParse(result.data)
+                } else {
+                    this.$toast(result.msg)
+                    return false
+                }
+            } catch (err) {
+                return false
+            }
+        },
         async __init() {
             setLoading(true)
             try {
@@ -285,6 +317,31 @@ export default {
 }
 </script>
 <style lang="less" scoped>
+.cropper {
+    width: 60px;
+    /* 切记position: relative一定要有 */
+    position: relative;
+    overflow: hidden;
+    text-align: center;
+    span {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        color: var(--main-color);
+    }
+    .upbtn {
+        height: 24px;
+    }
+}
+.img {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+}
 .signupBaseInfo {
     height: 100vh;
     overflow-y: auto;
@@ -301,7 +358,7 @@ export default {
     /deep/.van-field__label {
         font-size: .17rem;
         color: var(--font-main-color);
-        width: 1.15rem;
+        width: 1rem;
     }
     /deep/.van-field__body {
         font-size: .16rem