添加参数

dist/css/test.278367c5.css

@@ -1 +0,0 @@
-*{margin:0;padding:0}.show{width:200px;height:200px;position:relative;border-radius:50%;border:1px solid #d5d5d5}.picture,.show{overflow:hidden}.picture{width:100%;height:100%;background-position:50%;background-repeat:no-repeat;background-size:cover}

src/views/app/test.vue

@@ -1,155 +1,133 @@
 <template>
   <div>
-    <div style="padding:20px;">
-      <div class="show">
-        <div class="picture" :style="'backgroundImage:url('+headerImage+')'"></div>
-      </div>
-      <div style="margin-top:20px;">
-        <input type="file" id="upload" accept="image" @change="upload" />
-        <label for="upload"></label>
-      </div>
-    </div>
+    <van-uploader v-model="fileList"
+                  multiple
+                  :after-read="afterRead" />
+    <van-image width="100"
+               height="100"
+               :src="src" />
   </div>
 </template>
- 
 <script>
-import Exif from "exif-js";
-
+import Exif from 'exif-js'
 export default {
-  data() {
+  name: 'PolicyContent',
+  components: {
+
+  },
+  data () {
     return {
-      headerImage: "",
-      picValue: ""
-    };
+      fileList: [],
+      src: ""
+    }
   },
-  mounted() {},
   methods: {
-    upload(e) {
-      let files = e.target.files || e.dataTransfer.files;
-      if (!files.length) return;
-      this.picValue = files[0];
-      this.imgPreview(this.picValue);
-    },
-    imgPreview(file) {
-      let self = this;
-      let Orientation;
-      //去获取拍照时的信息，解决拍出来的照片旋转问题
-      Exif.getData(file, function() {
-        Orientation = Exif.getTag(this, "Orientation");
+    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);
       });
-      // 看支持不支持FileReader
-      if (!file || !window.FileReader) return;
-
-      if (/^image/.test(file.type)) {
-        // 创建一个reader
-        let reader = new FileReader();
-        // 将图片2将转成 base64 格式
-        reader.readAsDataURL(file);
-        // 读取成功后的回调
-        reader.onloadend = function() {
-          let result = this.result;
-          let img = new Image();
-          img.src = result;
-          //判断图片是否大于100K,是就直接上传，反之压缩图片
-          if (this.result.length <= 100 * 1024) {
-            self.headerImage = this.result;
-            self.postImg();
-          } else {
-            img.onload = function() {
-              let data = self.compress(img, Orientation);
-              self.headerImage = data;
-              self.postImg();
-            };
-          }
-        };
-      }
     },
-    postImg() {
-      //这里写接口
-    },
-    rotateImg(img, direction, canvas) {
-      //最小与最大旋转方向，图片旋转4次后回到原方向
-      const min_step = 0;
-      const max_step = 3;
-      if (img == null) return;
-      //img的高度和宽度不能在img元素隐藏后获取，否则会出错
-      let height = img.height;
-      let width = img.width;
-      let step = 2;
-      if (step == null) {
-        step = min_step;
+    callbackBase64Img (callbackImg) {
+      var img = new Image();
+      var self = this
+      img.onload = function () {
+        self.src = self.compress(img)
       }
-      if (direction == "right") {
-        step++;
-        //旋转到原位置，即超过最大值
-        step > max_step && (step = min_step);
-      } else {
-        step--;
-        step < min_step && (step = max_step);
-      }
-      //旋转角度以弧度值为参数
-      let degree = (step * 90 * Math.PI) / 180;
-      let ctx = canvas.getContext("2d");
-      switch (step) {
-        case 0:
-          canvas.width = width;
-          canvas.height = height;
-          ctx.drawImage(img, 0, 0);
-          break;
-        case 1:
+      img.src = callbackImg;
+    },
+    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;
-          ctx.rotate(degree);
-          ctx.drawImage(img, 0, -height);
-          break;
-        case 2:
+        } else {
           canvas.width = width;
           canvas.height = height;
-          ctx.rotate(degree);
-          ctx.drawImage(img, -width, -height);
-          break;
-        case 3:
-          canvas.width = height;
-          canvas.height = width;
-          ctx.rotate(degree);
-          ctx.drawImage(img, -width, 0);
-          break;
-      }
+        }
+
+        // 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);
+
+        // export base64
+        callback(canvas.toDataURL());
+      };
+
+      img.src = srcBase64;
     },
-    compress(img, Orientation) {
-      let canvas = document.createElement("canvas");
-      let ctx = canvas.getContext("2d");
+    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;
+      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) / 4000000) > 1) {
-        console.log("大于400万像素");
-        ratio = Math.sqrt(ratio);
-        width /= ratio;
-        height /= ratio;
+      let ratio
+      if ((ratio = (width * height) / 3500000) > 1) {
+        //console.log('大于400万像素')
+        ratio = Math.sqrt(ratio)
+        width /= ratio
+        height /= ratio
       } else {
-        ratio = 1;
+        ratio = 1
       }
-      canvas.width = width;
-      canvas.height = height;
+      canvas.width = width
+      canvas.height = height
       //        铺底色
-      ctx.fillStyle = "#fff";
-      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      ctx.fillStyle = '#fff'
+      ctx.fillRect(0, 0, canvas.width, canvas.height)
       //如果图片像素大于100万则使用瓦片绘制
-      let count;
+      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;
+        //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(
@@ -162,61 +140,18 @@ export default {
               0,
               nw,
               nh
-            );
-            ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
+            )
+            ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh)
           }
         }
       } else {
-        ctx.drawImage(img, 0, 0, width, height);
-      }
-      //修复ios上传图片的时候 被旋转的问题
-      if (Orientation != "" && Orientation != 1) {
-        switch (Orientation) {
-          case 6: //需要顺时针（向左）90度旋转
-            this.rotateImg(img, "left", canvas);
-            break;
-          case 8: //需要逆时针（向右）90度旋转
-            this.rotateImg(img, "right", canvas);
-            break;
-          case 3: //需要180度旋转
-            this.rotateImg(img, "right", canvas); //转两次
-            this.rotateImg(img, "right", canvas);
-            break;
-        }
+        ctx.drawImage(img, 0, 0, width, height)
       }
       //进行最小压缩
-      let ndata = canvas.toDataURL("image/jpeg", 0.1);
-      console.log("压缩前：" + initSize);
-      console.log("压缩后：" + ndata.length);
-      console.log(
-        "压缩率：" + ~~((100 * (initSize - ndata.length)) / initSize) + "%"
-      );
-      tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
-      return ndata;
-    }
-  }
-};
-</script>
- 
-<style>
-* {
-  margin: 0;
-  padding: 0;
-}
-.show {
-  width: 200px;
-  height: 200px;
-  overflow: hidden;
-  position: relative;
-  border-radius: 50%;
-  border: 1px solid #d5d5d5;
-}
-.picture {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-size: cover;
+      let ndata = canvas.toDataURL('image/jpeg', 0.5)
+      tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0
+      return ndata
+    },
+  },
 }
-</style>
+</script>

src/views/signup/SignUpAccount.vue

@@ -110,7 +110,8 @@
 				try {
 					let form = this.form
 					let params = {
-						mobile: form.phone
+						mobile: form.phone,
+						clientId: "student"
 					}
 					const code = await queryUserByPhone(params)
 					const result = code.data