add new dist files

Author: JackPu

dist/crop.vue

@@ -234,7 +234,7 @@ export default {
     },
 
     rotateImage(degress) {
-      const data = canvasHelper.rotate(this.originSrc, degress, (data, w, h) => {
+      const data = canvasHelper.rotate2(this.originSrc, degress, (data, w, h) => {
         this.setImage(data, w, h);
       });
       //this.src = src;
@@ -275,7 +275,7 @@ export default {
         this.width = w;
         this.height = h;
       } else {
-        if (r >= 1) {
+        if (r >= this.cropCSS.width/this.cropCSS.height) {
           this.height = this.cropCSS.height;
           this.width = this.height * r;
         } else {

dist/lib/canvas-helper.js

@@ -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" :is-rotate="rotate"></crop>
       <div class="info-aside">
+        <p class="btn-groups rotate-groups" style="display:none">
+          <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>
@@ -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;
@@ -158,7 +184,7 @@
       },
 
       doResize(e) {
-        this.__setData('reszie');
+        this.__setData('resize');
         const cropBox = this.$refs.cropBox;
         const upload = this.__setUpload(e.target);
         if (this.resize === 'local') {

dist/props.js

@@ -1,6 +1,6 @@
 {
   "name": "vue-core-image-upload",
-  "version": "2.3.6",
+  "version": "2.3.7",
   "description": "a vue plgin for image upload and crop",
   "main": "dist/vue-core-image-upload.vue",
   "dependencies": {

dist/vue-core-image-upload.vue

@@ -15,6 +15,7 @@
         crop-ratio="1:1"
         crop="local"
         resize="local"
+        :rotate="true"
         url="http://101.198.151.190/api/upload.php"
         @imageuploaded="crpoServerImageUploaded"
         :max-file-size="10485760"

index.js

@@ -234,7 +234,7 @@ export default {
     },
 
     rotateImage(degress) {
-      const data = canvasHelper.rotate(this.originSrc, degress, (data, w, h) => {
+      const data = canvasHelper.rotate2(this.originSrc, degress, (data, w, h) => {
         this.setImage(data, w, h);
       });
       //this.src = src;
@@ -275,7 +275,7 @@ export default {
         this.width = w;
         this.height = h;
       } else {
-        if (r >= 1) {
+        if (r >= this.cropCSS.width/this.cropCSS.height) {
           this.height = this.cropCSS.height;
           this.width = this.height * r;
         } else {

package.json

@@ -58,6 +58,47 @@ export default {
     }
   },
 
+  /**
+  * init image for reset size and rotation
+  **/
+  init(src, callback) {
+      let image = new Image();
+      image.src = src;
+      var self = this;
+      image.onload = function() {
+        var mimeType = self._getImageType(image.src);
+        var cvs = self._getCanvas(image.naturalWidth, image.naturalHeight);
+        var ctx = cvs.getContext("2d");
+        ctx.drawImage(image, 0, 0);
+        var newImageData = cvs.toDataURL(mimeType, 100);
+        callback(newImageData);
+      }
+  },
+
+  /**
+  * rotate image via canvas
+  **/
+  rotate(imageData, direction, callback) {
+      let image = new Image();
+      image.src = imageData.src;
+      var self = this;
+      image.onload = function() {
+        var mimeType = self._getImageType(image.src);
+        var cvs = self._getCanvas(image.naturalHeight, image.naturalWidth);
+        var ctx = cvs.getContext("2d");
+        if (direction == 1) {
+            ctx.rotate(90 * Math.PI / 180);
+            ctx.translate(0, -cvs.width);
+        } else {
+            ctx.rotate(-90 * Math.PI / 180);
+            ctx.translate(-cvs.height, 0);
+        }
+        ctx.drawImage(image, 0, 0);
+        var newImageData = cvs.toDataURL(mimeType, 100);
+        callback(newImageData);
+      }
+  },
+
   resize(image, options, callback) {
     const checkNumber = function(num) {
       return (typeof num === 'number');
@@ -73,7 +114,7 @@ export default {
     }
   },
 
-  rotate(src, degrees, callback) {
+  rotate2(src, degrees, callback) {
     this._loadImage(src, (image) => {
       let w = image.naturalWidth;
       let h = image.naturalHeight;
@@ -102,7 +143,6 @@ export default {
         x = canvasWidth / 2 - w;
         y = canvasWidth / 2 - h;
       }
-
       ctx.drawImage(image, x, y);
       const cvs2 = this._getCanvas(w, h);
       const ctx2 = cvs2.getContext('2d');

site/client/components/doc/en/CropImage.vue

@@ -37,7 +37,7 @@ export default {
   },
   rotate: {
     type: Boolean,
-    default: true,
+    default: false,
   },
   ResizeBtn: {
     type: Object,