add new resize support

Author: JackPu

index.js

@@ -35,7 +35,7 @@
       <li><code>maxHeight</code>: The maximum height of the crop image</li>
     </ul>
     <h4>Code example</h4>
-    <p>上传图片后可以看到裁剪的参数</p>
+    <p>Click button to upload and you can view some post params.</p>
     <div class="center">
       <div class="user">
           <img class="avatar" :src="cropSrc"/>
@@ -84,7 +84,7 @@
 </template>
 
 <script>
-import VueCoreImageUpload from 'vue-core-image-upload'
+import VueCoreImageUpload from 'vue-core-image-upload';
 export default {
   components: {
     VueCoreImageUpload

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

@@ -1,15 +1,15 @@
 <template>
 <div class="g-crop-image-principal">
   <div class="image-wrap" :style="{ width:width + 'px',height: height + 'px' }">
-    <img ref="crop-image" :src="src" :style="{ width:width + 'px',height: height + 'px' }">
+    <img ref="crop-image" :src="src" :style="{ width:'100%',height: '100%', }">
   </div>
-  <div class="image-mask">
+  <div class="image-mask" v-if="!hideCrop">
     <div class="mask top" :style="{ top:0, height: cropCSS.top + 'px', left: 0, width: '100%'}"></div>
     <div class="mask bottom" :style="{ bottom:0, top: (cropCSS.top + cropCSS.height) + 'px', left: 0, width: '100%'}"></div>
     <div class="mask left" :style="{top: cropCSS.top + 'px', height: cropCSS.height + 'px', left:0, width: cropCSS.left + 'px'}"></div>
     <div class="mask right" :style="{top: cropCSS.top + 'px', height: cropCSS.height + 'px', left: (cropCSS.left + cropCSS.width) + 'px', right: 0}"></div>
   </div>
-  <div class="crop-box" v-on:touchstart.self="drag" v-on:mousedown.self="drag" :style="{top: cropCSS.top + 'px', left: cropCSS.left + 'px', height: cropCSS.height + 'px',  width: cropCSS.width + 'px'}">
+  <div class="crop-box" v-if="!hideCrop" v-on:touchstart.self="drag" v-on:mousedown.self="drag" :style="{top: cropCSS.top + 'px', left: cropCSS.left + 'px', height: cropCSS.height + 'px',  width: cropCSS.width + 'px'}">
     <div class="reference-line v"></div>
     <div class="reference-line h"></div>
     <a class="g-resize" v-on:touchstart.self="resize" v-on:mousedown.self="resize"></a>
@@ -30,6 +30,7 @@
   background-color: rgba(255,255,255,.6);
 }
 .crop-box{
+  box-sizing: border-box;
   position: absolute;
   background: none;
   cursor: move;
@@ -71,7 +72,7 @@
 }
 .crop-box .g-resize{
   display: inline-block;
-  z-index: 90;
+  z-index: 1910;
   position: absolute;
   bottom: -8px;
   right: -8px;
@@ -100,6 +101,18 @@ export default {
     ratio: {
       type: String,
       default: '1:1'
+    },
+    minWidth: {
+      type: Number,
+      default: 50,
+    },
+    minHeight: {
+      type: Number,
+      default: 50,
+    },
+    hideCrop: {
+      type: [String, Boolean],
+      default: false,
     }
   },
 
@@ -120,40 +133,70 @@ export default {
       if (this.ratio.indexOf(':') > 0) {
         this.ratioW = this.ratio.split(':')[0];
         this.ratioH = this.ratio.split(':')[1];
-        this.ratioVal = this.ratioW / this.ratioH;  
+        this.ratioVal = this.ratioW / this.ratioH;
       } else {
         this.ratioW = 1;
         this.ratioH = 1;
         this.ratioVal = this.ratio;
       }
       this.setLayout(w, h);
       this.setCropBox();
+      this.natrualWidth = w;
+      this.natrualHeight = h;
+      return this.imgChangeRatio;
     },
+
+    resizeImage(progress) {
+      const w = this.natrualWidth * this.imgChangeRatio * progress;
+      const h = this.natrualHeight * this.imgChangeRatio * progress;
+      if (w <= this.minWidth || h < this.minHeight) {
+        return;
+      }
+      this._setStyle(w, h, w/h);
+      this.setCropBox();
+    },
+
     setLayout(w, h) {
       let H = window.innerHeight - 80,
           W = window.innerWidth - 60,
           width = w,
-          height = h;
+          height = h,
+          marginLeft = 0;
+
       // caculate the image ratio
       let R = width / height;
       let Rs = W / H;
-      let $container = this.$el;
       if (R > Rs) {
         width = W;
         height = W / R;
-        // I don't hope to use a state to change the container stye
-        $container.style.cssText = 'width:' + W + 'px;height:' + W / R + 'px;margin-top:' + (H - W / R) / 2 + 'px';
+        marginLeft =  (H - W / R) / 2;
       } else {
         width =  H * R,
         height = H;
-        $container.style.cssText = 'width:' + H * R + 'px;height:' + H + 'px;margin-left:' + (W - H * R) / 2 + 'px;';
+        marginLeft = (W - H * R) / 2;
       }
+      this.marginLeft = marginLeft;
+      this.marginTop = 0;
       this.imgChangeRatio = width / w;
-      this.width = width;
-      this.height = height;
+      this._setStyle(width, height, R, true);
+    },
+
+    _setStyle(w, h, r, isInit) {
+      const $container = this.$el;
+      if(!isInit) {
+        this.marginLeft = this.marginLeft + (this.width - w) / 2;
+        this.marginTop = this.marginTop + (this.height - h) / 2;
+      }
+      $container.style.cssText = 'width:' + w + 'px;height:' + h + 'px;margin-left:'
+      + this.marginLeft + 'px;' + 'margin-top:' + this.marginTop + 'px';
+      this.width = w;
+      this.height = h;
     },
 
     setCropBox() {
+      if (this.hideCrop) {
+        return;
+      }
       let $selectCropBox = this.__find('.crop-box');
       let $wrap = this.$el;
       let imageWidth = this.width,
@@ -181,6 +224,15 @@ export default {
 
     getCropData() {
       // keep compatible with old api
+      if (this.hideCrop) {
+        return {
+          imgChangeRatio: this.imgChangeRatio,
+          toCropImgX: 0,
+          toCropImgY: 0,
+          toCropImgW: this.natrualWidth,
+          toCropImgH: this.natrualHeight,
+        };
+      }
       return {
         toCropImgX: this.cropCSS.left / this.imgChangeRatio,
         toCropImgY: this.cropCSS.top / this.imgChangeRatio,

src/crop.vue

@@ -55,6 +55,21 @@ export default {
     }
   },
 
+  resize(image, options, callback) {
+    const checkNumber = function(num) {
+      return (typeof num === 'number');
+    };
+    if(checkNumber(options.toCropImgX) && checkNumber(options.toCropImgY) && options.toCropImgW > 0 && options.toCropImgH > 0) {
+      let w = options.toCropImgW  * options.imgChangeRatio;
+      let h = options.toCropImgH * options.imgChangeRatio;
+      const cvs = this._getCanvas(w, h);
+      const ctx = cvs.getContext('2d').drawImage(image, 0, 0, options.toCropImgW, options.toCropImgH, 0 , 0, w , h);
+      const mimeType = this._getImageType(image.src);
+      const data = cvs.toDataURL(mimeType, options.compress/100);
+      callback(data);
+    }
+  },
+
   _loadImage(data, callback) {
     const image = new Image();
     image.src = data;

src/lib/canvas-helper.js

@@ -8,7 +8,7 @@ export default function drag(e, el, coor) {
   const currentX = isMobile ? e.changedTouches[0]['clientX'] : e.clientX;
   const currentY = isMobile ? e.changedTouches[0]['clientY'] : e.clientY;
 
-  let left = currentX - el.parentElement.offsetLeft - document.getElementsByClassName('image-aside')[0].offsetLeft - coor.x;
+  let left = currentX - el.parentElement.offsetLeft - coor.x;
   let top = currentY - el.parentElement.offsetTop - document.getElementsByClassName('image-aside')[0].offsetTop - coor.y;
   if (left <= 0) {
     left = 0;

src/lib/drag.js

@@ -7,11 +7,7 @@
 import helper from './helper';
 
 const isMobile = helper.isMobile;
-
 const W = document.body.offsetWidth;
-
-
-
 export default function resize(e, el, container, coor, ratio) {
   if (!el) {
     return ;
@@ -70,10 +66,10 @@ export default function resize(e, el, container, coor, ratio) {
   } else if(ratio == 'auto' && resetY <= (halfY + dotBoxH + topH) && resetX <= halfY + dotBoxW) {
     CSSObj.height = (coor.h + resetY - coor.y);
     CSSObj.width = (coor.w + resetX - coor.x);
-  } else if (resetX <= $halfX + dotBoxW) {
+  } else if (resetX <= halfX + dotBoxW) {
     CSSObj.width = (coor.w + resetX - coor.x);
     CSSObj.height = el.style.width;
-    // limit the copr box area
+    // limit the crop box area
     if (dotBoxW > dotBoxH) {
       if (elOffsetHeight >= dotBoxH) {
         CSSObj.height = dotBoxH;

src/lib/resize.js

@@ -1,6 +1,7 @@
 /**
  * simple ajax handler
  **/
+
  //ADD sendAsBinary compatibilty to older browsers
  if (XMLHttpRequest.prototype.sendAsBinary === undefined) {
    XMLHttpRequest.prototype.sendAsBinary = function(string) {

src/lib/xhr.js

@@ -43,9 +43,11 @@ export default {
   },
   ResizeBtn: {
     type: Object,
-    default: return {
-      ok: 'Ok',
-      cancel: 'Cancel'
+    default: function() {
+      return {
+        ok: 'Ok',
+        cancel: 'Cancel'
+      }
     }
   },
   maxFileSize:{
@@ -86,6 +88,10 @@ export default {
     type: Number,
     default: 0
   },
+  minWidth: {
+    type: Number,
+    default: 50,
+  },
   compress: {
     type: [Number, String],
     default: 0,

src/props.js

@@ -39,7 +39,6 @@
   color:#f1f1f1;
 }
 .g-core-image-corp-container .image-aside{
-  overflow: hidden;
   position: absolute;
   right: 30px;
   left:30px;
@@ -67,33 +66,6 @@
   background: #fefefe;
   color:#777;
 }
-.g-core-image-corp-container .info-aside .image-corp-preview{
-  position: relative;
-  overflow: hidden;
-  text-align: center;
-  border:2px solid #ccc;
-}
-.g-core-image-corp-container .info-aside .image-corp-preview.circled{
-  border-radius: 160px;
-}
-.g-core-image-corp-container .info-aside .image-corp-preview img{
-  width: 100%;
-}
-.g-core-image-corp-container .info-aside .config-info .image-details{
-  width: 100%;
-  color:#999;
-}
-
-.g-core-image-corp-container .info-aside .config-info .image-details td{
-  border:none;
-  line-height: 24px;
-}
-.g-core-image-corp-container .info-aside .config-info .image-details tr td:first-child{
-  width:36%;
-}
-.g-core-image-corp-container .info-aside .config-info .image-details tr td:last-child{
-  color:#555;
-}
 .g-core-image-corp-container .btn-groups{
   text-align: right;
   margin: 5px 0 0;
@@ -135,5 +107,4 @@
 }
 .g-core-image-corp-container .g-crop-image-box,.g-core-image-corp-container .g-crop-image-box .g-crop-image-principal{
   position: relative;
-
 }