Update vue-core-image-upload.vue

Shinerising · web-flow · commit 874fe197fe17 · 2017-07-19T10:10:53.000+08:00
diff --git a/src/vue-core-image-upload.vue b/src/vue-core-image-upload.vue
@@ -7,6 +7,10 @@
     <div class="g-core-image-corp-container" v-bind:id="'vciu-modal-' + formID" v-show="hasImage">
       <crop ref="cropBox" :is-resize="resize && !crop" :ratio="cropRatio"></crop>
       <div class="info-aside">
+        <p class="btn-groups rotate-groups" v-if="crop">
+          <button type="button" v-on:click="doRotate" class="btn btn-rotate">↺</button>
+          <button type="button" v-on:click="doReverseRotate" class="btn btn-reverserotate">↻</button>
+        </p>
         <p class="btn-groups" v-if="crop">
           <button type="button" v-on:click="doCrop" class="btn btn-upload">{{cropBtn.ok}}</button>
           <button type="button" v-on:click="cancel" class="btn btn-cancel">{{cropBtn.cancel}}</button>
@@ -78,7 +82,7 @@
         if(extensionsArr.length>1) {
             var reg = new RegExp('^[' + extensionsArr.join('|') + ']+$','i');
             if (!reg.test(fileExt)) {
-                return this.__dispatch('errorhandle','TYPE ERROR');
+                return this.__dispatch('errorhandle','图片格式错误！');
             }
         }
         if (e.target.files[0].size > this.maxFileSize) {
@@ -91,7 +95,7 @@
                 formatSize = options.maxFileSize.toFixed(2) + 'Byte';
             }
             console.warn('FILE IS TOO LARGER MAX FILE IS ' + formatSize);
-            return this.__dispatch('errorhandle','FILE IS TOO LARGER MAX FILE IS ' + formatSize);
+            return this.__dispatch('errorhandle','图片不能大于' + formatSize);
         }
 
         this.files = e.target.files;
@@ -133,7 +137,9 @@
         const cropBox = this.$refs.cropBox;
         pic.onload= function() {
           self.image.minProgress = self.minWidth / pic.naturalWidth;
-          self.imgChangeRatio = cropBox.setImage(src, pic.naturalWidth, pic.naturalHeight);
+          canvasHelper.init(src, (src) => {
+            self.imgChangeRatio = cropBox.setImage(src, pic.naturalWidth, pic.naturalHeight);
+          });
         }
       },
 
@@ -142,6 +148,26 @@
         cropBox.resizeImage(progress);
       },
 
+      doRotate(e) {
+        let self = this;
+        const cropBox = this.$refs.cropBox;
+        const targetImage = cropBox.getCropImage();
+        this.data.comprose = 100 - this.compress;
+        return canvasHelper.rotate(targetImage, 1, (src) => {
+            self.__initImage(src)
+          })
+      },
+
+      doReverseRotate(e) {
+        let self = this;
+        const cropBox = this.$refs.cropBox;
+        const targetImage = cropBox.getCropImage();
+        this.data.comprose = 100 - this.compress;
+        return canvasHelper.rotate(targetImage, -1, (src) => {
+            self.__initImage(src)
+          })
+      },
+
       doCrop(e) {
         this.__setData('crop');
         const cropBox = this.$refs.cropBox;
@@ -159,7 +185,7 @@
       },
 
       doResize(e) {
-        this.__setData('reszie');
+        this.__setData('resize');
         const cropBox = this.$refs.cropBox;
         const upload = this.__setUpload(e.target);
         if (this.resize === 'local') {
@@ -258,6 +284,7 @@
             }
           }
         }
+        console.log(data);
         xhr('POST',this.url, this.headers, data, done, errorUpload, isBinary);
       },
     },
