fixed original src bug

JackPu · JackPu · commit 6939923f7c73 · 2017-07-16T21:19:42.000+08:00
diff --git a/dist/crop.vue b/dist/crop.vue
@@ -133,7 +133,7 @@ import GIF_LOADING_SRC from './lib/loading-gif';
 import helper from './lib/helper';
 import canvasHelper from './lib/canvas-helper';
 import ResizeBar from './resize-bar.vue';
-import RotateBar from './rotate-bar.vue';
+import RotateBar from './rotate-bar';
 // set cropbox size in image
 const CROPBOX_PERCENT = 75;
 const isMobile = helper.isMobile;
@@ -186,7 +186,7 @@ export default {
     setImage(src, w, h) {
       this.src = src;
       if (!this.originSrc) {
-          this.originSrc = this.src;
+        this.setOriginalSrc(this.src);
       }
       if (this.ratio.indexOf(':') > 0) {
         this.ratioW = this.ratio.split(':')[0];
@@ -208,6 +208,11 @@ export default {
       }
       return this.imgChangeRatio;
     },
+
+    setOriginalSrc(src) {
+      this.originSrc = src;
+    },
+
     resizeImage(progress) {
       let w,
           h;
@@ -366,13 +371,13 @@ export default {
       };
       this.el = $el;
       this.container = $container;
+      const maxCoor = this._getMaxCropAreaWidth();
       const move = function (ev) {
         const newCropStyle = resize(ev, self.el, $container, coor, self.ratioVal);
-        if (newCropStyle) {
+        if (newCropStyle && (newCropStyle.width <= maxCoor.maxWidth || newCropStyle.height <= maxCoor.maxHeight)) {
           self.cropCSS.width = newCropStyle.width;
           self.cropCSS.height = newCropStyle.height;
         }
-
       };
       const end = function (ev) {
         this.el = null;
@@ -391,6 +396,20 @@ export default {
       document.addEventListener('mouseup', end, false);
     },
 
+    _getMaxCropAreaWidth() {
+      const $cropBox = this.__find('.crop-box');
+      if (this.width > this.height) {
+        return {
+          maxWidth: this.height * this.ratioW / this.ratioH,
+          maxHeight: this.height,
+        }
+      }
+      return {
+        maxWidth: this.width,
+        maxHeight: this.width * this.ratioH / this.ratioW,
+      };
+    },
+
     drag(e) {
       e.preventDefault();
       const $el = this.__find('.image-wrap');
diff --git a/dist/index.js b/dist/index.js
@@ -1,2 +1,2 @@
-import VueCoreImageUpload from './vue-core-image-upload.vue';
+import VueCoreImageUpload from 'vue-core-image-upload';
 export default VueCoreImageUpload;
diff --git a/dist/lib/resize.js b/dist/lib/resize.js
diff --git a/dist/props.js b/dist/props.js
diff --git a/dist/resize-bar.vue b/dist/resize-bar.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="g-resize-bar">
     <div class="g-resize-highlight" :style="{width: left + '%',}"></div>
-    <button type="button" class="circle-btn" @touchstart.self="drag" @mousedown.self="drag" :style="{left: left + '%',}"></button>
+    <button class="circle-btn" @touchstart.self="drag" @mousedown.self="drag" :style="{left: left + '%',}"></button>
   </div>
 </template>
 
diff --git a/dist/rotate-bar.vue b/dist/rotate-bar.vue
@@ -34,7 +34,7 @@
 </style>
 
 <script>
-module.exports = {
+export default {
   data() {
       return {
         rotateDegree: 0,
diff --git a/dist/vue-core-image-upload.vue b/dist/vue-core-image-upload.vue
@@ -209,6 +209,8 @@
         this.hasImage = false;
         document.body.style.overflow = overflowVal;
         this.files = '';
+        const cropBox = this.$refs.cropBox;
+        cropBox.setOriginalSrc(null);
         document.querySelector('#g-core-upload-input-' + this.formID).value = '';
       },
 
diff --git a/index.js b/index.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-core-image-upload",
-  "version": "2.3.3",
+  "version": "2.3.4",
   "description": "a vue plgin for image upload and crop",
   "main": "dist/vue-core-image-upload.vue",
   "dependencies": {
diff --git a/site/client/components/doc/en/CropImage.vue b/site/client/components/doc/en/CropImage.vue
@@ -12,6 +12,7 @@
           <img class="avatar" :src="src"/>
       </div>
       <vue-core-image-upload
+        crop-ratio="1:1"
         crop="local"
         resize="local"
         url="http://101.198.151.190/api/upload.php"
diff --git a/site/src/crop.vue b/site/src/crop.vue
@@ -186,7 +186,7 @@ export default {
     setImage(src, w, h) {
       this.src = src;
       if (!this.originSrc) {
-          this.originSrc = this.src;
+        this.setOriginalSrc(this.src);
       }
       if (this.ratio.indexOf(':') > 0) {
         this.ratioW = this.ratio.split(':')[0];
@@ -208,6 +208,11 @@ export default {
       }
       return this.imgChangeRatio;
     },
+
+    setOriginalSrc(src) {
+      this.originSrc = src;
+    },
+
     resizeImage(progress) {
       let w,
           h;
@@ -366,13 +371,13 @@ export default {
       };
       this.el = $el;
       this.container = $container;
+      const maxCoor = this._getMaxCropAreaWidth();
       const move = function (ev) {
         const newCropStyle = resize(ev, self.el, $container, coor, self.ratioVal);
-        if (newCropStyle) {
+        if (newCropStyle && (newCropStyle.width <= maxCoor.maxWidth || newCropStyle.height <= maxCoor.maxHeight)) {
           self.cropCSS.width = newCropStyle.width;
           self.cropCSS.height = newCropStyle.height;
         }
-
       };
       const end = function (ev) {
         this.el = null;
@@ -391,6 +396,20 @@ export default {
       document.addEventListener('mouseup', end, false);
     },
 
+    _getMaxCropAreaWidth() {
+      const $cropBox = this.__find('.crop-box');
+      if (this.width > this.height) {
+        return {
+          maxWidth: this.height * this.ratioW / this.ratioH,
+          maxHeight: this.height,
+        }
+      }
+      return {
+        maxWidth: this.width,
+        maxHeight: this.width * this.ratioH / this.ratioW,
+      };
+    },
+
     drag(e) {
       e.preventDefault();
       const $el = this.__find('.image-wrap');
diff --git a/site/src/lib/resize.js b/site/src/lib/resize.js
@@ -14,16 +14,16 @@ export default function resize(e, el, container, coor, ratio) {
   }
   const H = document.body.offsetHeight;
   const ratioRemainder = 1 / ratio;
-  const dotBoxW = parseInt(window.getComputedStyle(container).width);
-  const dotBoxH = parseInt(window.getComputedStyle(container).height);
+  const dotBoxW = parseFloat(window.getComputedStyle(container).width);
+  const dotBoxH = parseFloat(window.getComputedStyle(container).height);
   const $topH = document.querySelector('.info-aside');
   const halfX = (W - dotBoxW) / 2;
-  const topH = parseInt(window.getComputedStyle($topH).height);
+  const topH = parseFloat(window.getComputedStyle($topH).height);
   const halfY = (H - dotBoxH - topH)/2;
   const resetX = isMobile ? e.changedTouches[0]['clientX'] : e.clientX;
   const resetY = isMobile ? e.changedTouches[0]['clientY'] : e.clientY;
-  const elOffsetWidth = parseInt(el.offsetWidth);
-  const elOffsetHeight = parseInt(el.offsetHeight);
+  const elOffsetWidth = el.offsetWidth;
+  const elOffsetHeight = el.offsetHeight;
   const CSSObj = {};
   if (ratio >= 1 && resetX <= halfX + dotBoxW) {
     if (elOffsetWidth >= dotBoxW) {
@@ -47,7 +47,7 @@ export default function resize(e, el, container, coor, ratio) {
     }
   } else if (ratio < 1 && resetY < (halfY + dotBoxH + topH)) {
     CSSObj.height = (coor.h + resetY - coor.y);
-    CSSObj.width = parseInt(el.style.height) * ratio;
+    CSSObj.width = elOffsetHeight * ratio;
     // 限制拖拉的范围在图片内
     if (dotBoxW > dotBoxH) {
       if (elOffsetHeight > dotBoxH) {
diff --git a/site/src/vue-core-image-upload.vue b/site/src/vue-core-image-upload.vue
@@ -209,6 +209,8 @@
         this.hasImage = false;
         document.body.style.overflow = overflowVal;
         this.files = '';
+        const cropBox = this.$refs.cropBox;
+        cropBox.setOriginalSrc(null);
         document.querySelector('#g-core-upload-input-' + this.formID).value = '';
       },
 
diff --git a/src/crop.vue b/src/crop.vue
@@ -133,7 +133,7 @@ import GIF_LOADING_SRC from './lib/loading-gif';
 import helper from './lib/helper';
 import canvasHelper from './lib/canvas-helper';
 import ResizeBar from './resize-bar.vue';
-import RotateBar from './rotate-bar.vue';
+import RotateBar from './rotate-bar';
 // set cropbox size in image
 const CROPBOX_PERCENT = 75;
 const isMobile = helper.isMobile;
@@ -186,7 +186,7 @@ export default {
     setImage(src, w, h) {
       this.src = src;
       if (!this.originSrc) {
-          this.originSrc = this.src;
+        this.setOriginalSrc(this.src);
       }
       if (this.ratio.indexOf(':') > 0) {
         this.ratioW = this.ratio.split(':')[0];
@@ -208,6 +208,11 @@ export default {
       }
       return this.imgChangeRatio;
     },
+
+    setOriginalSrc(src) {
+      this.originSrc = src;
+    },
+
     resizeImage(progress) {
       let w,
           h;
@@ -366,13 +371,13 @@ export default {
       };
       this.el = $el;
       this.container = $container;
+      const maxCoor = this._getMaxCropAreaWidth();
       const move = function (ev) {
         const newCropStyle = resize(ev, self.el, $container, coor, self.ratioVal);
-        if (newCropStyle) {
+        if (newCropStyle && (newCropStyle.width <= maxCoor.maxWidth || newCropStyle.height <= maxCoor.maxHeight)) {
           self.cropCSS.width = newCropStyle.width;
           self.cropCSS.height = newCropStyle.height;
         }
-
       };
       const end = function (ev) {
         this.el = null;
@@ -391,6 +396,20 @@ export default {
       document.addEventListener('mouseup', end, false);
     },
 
+    _getMaxCropAreaWidth() {
+      const $cropBox = this.__find('.crop-box');
+      if (this.width > this.height) {
+        return {
+          maxWidth: this.height * this.ratioW / this.ratioH,
+          maxHeight: this.height,
+        }
+      }
+      return {
+        maxWidth: this.width,
+        maxHeight: this.width * this.ratioH / this.ratioW,
+      };
+    },
+
     drag(e) {
       e.preventDefault();
       const $el = this.__find('.image-wrap');
diff --git a/src/index.js b/src/index.js
@@ -1,2 +1,2 @@
-import VueCoreImageUpload from './vue-core-image-upload.vue';
+import VueCoreImageUpload from 'vue-core-image-upload';
 export default VueCoreImageUpload;
diff --git a/src/lib/resize.js b/src/lib/resize.js
@@ -14,16 +14,16 @@ export default function resize(e, el, container, coor, ratio) {
   }
   const H = document.body.offsetHeight;
   const ratioRemainder = 1 / ratio;
-  const dotBoxW = parseInt(window.getComputedStyle(container).width);
-  const dotBoxH = parseInt(window.getComputedStyle(container).height);
+  const dotBoxW = parseFloat(window.getComputedStyle(container).width);
+  const dotBoxH = parseFloat(window.getComputedStyle(container).height);
   const $topH = document.querySelector('.info-aside');
   const halfX = (W - dotBoxW) / 2;
-  const topH = parseInt(window.getComputedStyle($topH).height);
+  const topH = parseFloat(window.getComputedStyle($topH).height);
   const halfY = (H - dotBoxH - topH)/2;
   const resetX = isMobile ? e.changedTouches[0]['clientX'] : e.clientX;
   const resetY = isMobile ? e.changedTouches[0]['clientY'] : e.clientY;
-  const elOffsetWidth = parseInt(el.offsetWidth);
-  const elOffsetHeight = parseInt(el.offsetHeight);
+  const elOffsetWidth = el.offsetWidth;
+  const elOffsetHeight = el.offsetHeight;
   const CSSObj = {};
   if (ratio >= 1 && resetX <= halfX + dotBoxW) {
     if (elOffsetWidth >= dotBoxW) {
@@ -47,7 +47,7 @@ export default function resize(e, el, container, coor, ratio) {
     }
   } else if (ratio < 1 && resetY < (halfY + dotBoxH + topH)) {
     CSSObj.height = (coor.h + resetY - coor.y);
-    CSSObj.width = parseInt(el.style.height) * ratio;
+    CSSObj.width = elOffsetHeight * ratio;
     // 限制拖拉的范围在图片内
     if (dotBoxW > dotBoxH) {
       if (elOffsetHeight > dotBoxH) {
diff --git a/src/resize-bar.vue b/src/resize-bar.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="g-resize-bar">
     <div class="g-resize-highlight" :style="{width: left + '%',}"></div>
-    <button type="button" class="circle-btn" @touchstart.self="drag" @mousedown.self="drag" :style="{left: left + '%',}"></button>
+    <button class="circle-btn" @touchstart.self="drag" @mousedown.self="drag" :style="{left: left + '%',}"></button>
   </div>
 </template>
 
diff --git a/src/rotate-bar.vue b/src/rotate-bar.vue
@@ -34,7 +34,7 @@
 </style>
 
 <script>
-module.exports = {
+export default {
   data() {
       return {
         rotateDegree: 0,
diff --git a/src/vue-core-image-upload.vue b/src/vue-core-image-upload.vue
@@ -209,6 +209,8 @@
         this.hasImage = false;
         document.body.style.overflow = overflowVal;
         this.files = '';
+        const cropBox = this.$refs.cropBox;
+        cropBox.setOriginalSrc(null);
         document.querySelector('#g-core-upload-input-' + this.formID).value = '';
       },
 

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,2 @@`
`1`		`-import VueCoreImageUpload from './vue-core-image-upload.vue';`
	`1`	`+import VueCoreImageUpload from 'vue-core-image-upload';`
`2`	`2`	`export default VueCoreImageUpload;`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "vue-core-image-upload",`
`3`		`- "version": "2.3.3",`
	`3`	`+ "version": "2.3.4",`
`4`	`4`	`"description": "a vue plgin for image upload and crop",`
`5`	`5`	`"main": "dist/vue-core-image-upload.vue",`
`6`	`6`	`"dependencies": {`