From c4e95050da96b7a83241a7c2128608c12880a634 Mon Sep 17 00:00:00 2001
From: JackPu <kakashjack@gmail.com>
Date: Fri, 12 May 2017 15:19:03 +0800
Subject: [PATCH] update new doc

---
 dist/crop.vue                                 | 339 ++++++++++++++++++
 dist/index.js                                 |   2 +
 dist/lib/canvas-helper.js                     |   1 +
 dist/lib/drag.js                              |   1 +
 dist/lib/helper.js                            |   1 +
 dist/lib/loading-gif.js                       |   1 +
 dist/lib/resize.js                            |   1 +
 dist/lib/xhr.js                               |   1 +
 dist/props.js                                 |  93 +++++
 dist/resize-bar.vue                           | 127 +++++++
 dist/style/style.css                          | 110 ++++++
 dist/vue-core-image-upload.vue                | 273 ++++++++++++++
 site/client/components/Header.vue             |  17 +-
 site/client/components/NavList.vue            |  12 +-
 site/client/components/doc/en/CropImage.vue   |   2 +-
 .../client/components/doc/en/MultipleFile.vue |   2 +-
 site/client/less/modules/m-layout.less        |  64 +++-
 site/src/vue-core-image-upload.vue            |   8 +-
 src/vue-core-image-upload.vue                 |   8 +-
 19 files changed, 1047 insertions(+), 16 deletions(-)
 create mode 100644 dist/crop.vue
 create mode 100644 dist/index.js
 create mode 100644 dist/lib/canvas-helper.js
 create mode 100644 dist/lib/drag.js
 create mode 100644 dist/lib/helper.js
 create mode 100644 dist/lib/loading-gif.js
 create mode 100644 dist/lib/resize.js
 create mode 100644 dist/lib/xhr.js
 create mode 100644 dist/props.js
 create mode 100644 dist/resize-bar.vue
 create mode 100644 dist/style/style.css
 create mode 100644 dist/vue-core-image-upload.vue

diff --git a/dist/crop.vue b/dist/crop.vue
new file mode 100644
index 0000000..29a54fd
--- /dev/null
+++ b/dist/crop.vue
@@ -0,0 +1,339 @@
+<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:'100%',height: '100%', }">
+  </div>
+  <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-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>
+  </div>
+</div>
+</template>
+
+<style scoped>
+.image-mask{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width:100%;
+  height: 100%;
+}
+.image-mask .mask {
+  position: absolute;
+  background-color: rgba(255,255,255,.6);
+}
+.crop-box{
+  box-sizing: border-box;
+  position: absolute;
+  background: none;
+  cursor: move;
+  width:100px;
+  height: 100px;
+  border:1px solid rgba(255,255,255, .95);
+}
+.crop-box:after,
+.crop-box:before{
+  content: '';
+  display: block;
+  opacity: 0;
+  position: absolute;
+  left: 33.3333%;
+  top: 0;
+  width: 33.334%;
+  height: 100%;
+  background-color: transparent;
+  border-color: rgba(255,255,255,.7);
+  border-style: solid;
+  border-width: 0;
+}
+.crop-box:active::before,
+.crop-box:active::after{
+  opacity: 1;
+}
+.crop-box:before{
+  border-left-width: 1px;
+  border-right-width: 1px;
+}
+.crop-box:after{
+  top: 33.3333%;
+  left: 0;
+  height: 33.3334%;
+  width: 100%;
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+
+}
+.crop-box .g-resize{
+  display: inline-block;
+  z-index: 1910;
+  position: absolute;
+  bottom: -8px;
+  right: -8px;
+  width: 16px;
+  height: 16px;
+  cursor: se-resize;
+  border-radius: 10px;
+  background-color: #fff;
+  box-shadow: 0 2px 4px -2px rgba(0,0,0,.25);
+}
+</style>
+
+<script>
+import drag from './lib/drag';
+import resize from './lib/resize';
+import GIF_LOADING_SRC from './lib/loading-gif';
+import helper from './lib/helper';
+// set cropbox size in image
+const CROPBOX_PERCENT = 75;
+export default {
+  props: {
+    formId: {
+      type: String,
+      default: '',
+    },
+    ratio: {
+      type: String,
+      default: '1:1'
+    },
+    minWidth: {
+      type: Number,
+      default: 50,
+    },
+    minHeight: {
+      type: Number,
+      default: 50,
+    },
+    hideCrop: {
+      type: [String, Boolean],
+      default: false,
+    }
+  },
+
+  data() {
+    return {
+      src: GIF_LOADING_SRC,
+      width: 24,
+      height: 24,
+      cropCSS: {
+
+      }
+    }
+  },
+
+  methods: {
+    setImage(src, w, h) {
+      this.src = src;
+      if (this.ratio.indexOf(':') > 0) {
+        this.ratioW = this.ratio.split(':')[0];
+        this.ratioH = this.ratio.split(':')[1];
+        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,
+          marginLeft = 0;
+
+      // caculate the image ratio
+      let R = width / height;
+      let Rs = W / H;
+      if (R > Rs) {
+        width = W;
+        height = W / R;
+        marginLeft =  (H - W / R) / 2;
+      } else {
+        width =  H * R,
+        height = H;
+        marginLeft = (W - H * R) / 2;
+      }
+      this.marginLeft = marginLeft;
+      this.marginTop = 0;
+      this.imgChangeRatio = width / w;
+      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,
+          imageHeight = this.height;
+      let ratioW = this.ratioW,
+          ratioH = this.ratioH;
+      const baseCropWidth = (imageWidth / 100) * CROPBOX_PERCENT;
+      const CSSObj = {
+        width: baseCropWidth,
+        height: (baseCropWidth / ratioW) * ratioH,
+      }
+      CSSObj.left = (imageWidth - baseCropWidth) / 2;
+      CSSObj.top = (imageHeight - CSSObj.height) / 2;
+      $selectCropBox.style.cssText = helper.setCssText(CSSObj);
+      if (CSSObj.height > imageHeight) {
+        const baseCropHeight = (imageHeight / 100) * CROPBOX_PERCENT
+        CSSObj.height = baseCropHeight;
+        CSSObj.width = (CSSObj.height * ratioW) / ratioH;
+        CSSObj.left = (imageWidth - CSSObj.width) / 2,
+        CSSObj.top = (imageHeight - CSSObj.height) / 2,
+        $selectCropBox.style.cssText = helper.setCssText(CSSObj);
+      };
+      this.cropCSS = CSSObj;
+    },
+
+    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,
+        toCropImgW: this.cropCSS.width / this.imgChangeRatio,
+        toCropImgH: this.cropCSS.height / this.imgChangeRatio,
+      };
+    },
+
+    getCropImage() {
+      return this.$refs['crop-image'];
+    },
+
+    __find(str) {
+      let dq = document.querySelector('#vciu-modal-' + this.formId);
+      return dq.querySelector(str);
+    },
+    // resize and drag move
+    resize(e) {
+      e.stopPropagation();
+      let $el = e.target.parentElement;
+      let $container = this.__find('.g-crop-image-principal');
+      if (this._$container) {
+        this._$container = container;
+      }
+      const self = this;
+      const coor = {
+        x: helper.isMobile ? e.touches[0].clientX : e.clientX,
+        y: helper.isMobile ? e.touches[0].clientY : e.clientY,
+        w: parseInt(window.getComputedStyle($el).width, 10),
+        h: parseInt(window.getComputedStyle($el).height, 10)
+      };
+      this.el = $el;
+      this.container = $container;
+      const move = function (ev) {
+        const newCropStyle = resize(ev, self.el, $container, coor, self.ratioVal);
+        if (newCropStyle) {
+          self.cropCSS.width = newCropStyle.width;
+          self.cropCSS.height = newCropStyle.height;
+        }
+
+      };
+      const end = function (ev) {
+        this.el = null;
+        if (helper.isMobile) {
+          document.removeEventListener('touchmove', move, false);
+          document.removeEventListener('touchend', end, false);
+        }
+        document.removeEventListener('mousemove', move, false);
+        document.removeEventListener('mouseup', end, false);
+      };
+
+      if (helper.isMobile) {
+        document.addEventListener('touchmove', move, false);
+        document.addEventListener('touchend', end, false);
+      }
+      document.addEventListener('mousemove', move, false);
+      document.addEventListener('mouseup', end, false);
+    },
+
+    drag(e) {
+      e.preventDefault();
+      const $el = e.target;
+      this.el = $el;
+      const $container = this.$el;
+      const $infoAside = document.getElementsByClassName('image-aside')[0];
+      const self = this;
+      const isMobile = helper.isMobile;
+      const coor = {
+        x: (isMobile ? e.touches[0]['clientX'] : e.clientX) - $el.offsetLeft - $el.parentElement.offsetLeft - $infoAside.offsetLeft,
+        y: (isMobile ? e.touches[0]['clientY'] : e.clientY) - $el.offsetTop - $el.parentElement.offsetTop - $infoAside.offsetTop,
+        posX: isMobile ? e.touches[0]['clientX'] : e.clientX,
+        posy: isMobile ? e.touches[0]['clientY'] : e.clientY,
+        maxLeft: parseInt($container.style.width) - parseInt($el.style.width),
+        maxTop: parseInt($container.style.height) - parseInt($el.style.height),
+      };
+      const move = function (ev) {
+        const newCropStyle = drag(ev, self.el, coor);
+        if (newCropStyle) {
+          self.cropCSS.left = newCropStyle.left;
+          self.cropCSS.top = newCropStyle.top;
+        }
+      };
+      const stopMove = function (ev) {
+        self.el = null;
+        if (isMobile) {
+          document.removeEventListener('touchmove', move, false);
+          document.removeEventListener('touchend', stopMove, false);
+          return;
+        }
+        document.removeEventListener('mousemove', move, false);
+        document.removeEventListener('mouseup', stopMove, false);
+      };
+      if (isMobile) {
+        document.addEventListener('touchmove', move, false);
+        document.addEventListener('touchend', stopMove, false);
+        return;
+      }
+      document.addEventListener('mousemove', move, false);
+      document.addEventListener('mouseup', stopMove, false);
+    },
+  },
+
+}
+</script>
diff --git a/dist/index.js b/dist/index.js
new file mode 100644
index 0000000..a8c0731
--- /dev/null
+++ b/dist/index.js
@@ -0,0 +1,2 @@
+import VueCoreImageUpload from './vue-core-image-upload.vue';
+export default VueCoreImageUpload;
diff --git a/dist/lib/canvas-helper.js b/dist/lib/canvas-helper.js
new file mode 100644
index 0000000..cc87c9d
--- /dev/null
+++ b/dist/lib/canvas-helper.js
@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueCoreImageUpload=e():t.VueCoreImageUpload=e()}(this,function(){return function(t){function e(r){if(o[r])return o[r].exports;var n=o[r]={i:r,l:!1,exports:{}};return t[r].call(n.exports,n,n.exports,e),n.l=!0,n.exports}var o={};return e.m=t,e.c=o,e.i=function(t){return t},e.d=function(t,o,r){e.o(t,o)||Object.defineProperty(t,o,{configurable:!1,enumerable:!0,get:r})},e.n=function(t){var o=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(o,"a",o),o},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=20)}({20:function(t,e,o){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={_getImageType:function(t){var e="image/jpeg",o=t.match(/(image\/[\w]+)\.*/)[0];return void 0!==o&&(e=o),e},compress:function(t,e,o){var r=new FileReader,n=this;r.onload=function(r){var a=new Image;a.src=r.target.result,a.onload=function(){var r=n._getImageType(t.type),i=n._getCanvas(a.naturalWidth,a.naturalHeight),g=(i.getContext("2d").drawImage(a,0,0),i.toDataURL(r,e/100));o(g)}},r.readAsDataURL(t)},crop:function(t,e,o){var r=function(t){return"number"==typeof t};if(r(e.toCropImgX)&&r(e.toCropImgY)&&e.toCropImgW>0&&e.toCropImgH>0){var n=e.toCropImgW,a=e.toCropImgH;e.maxWidth&&e.maxWidth<n&&(n=e.maxWidth,a=e.toCropImgH*n/e.toCropImgW),e.maxHeight&&e.maxHeight<a&&(a=e.maxHeight);var i=this._getCanvas(n,a),g=(i.getContext("2d").drawImage(t,e.toCropImgX,e.toCropImgY,e.toCropImgW,e.toCropImgH,0,0,n,a),this._getImageType(t.src));o(i.toDataURL(g,e.compress/100))}},resize:function(t,e,o){var r=function(t){return"number"==typeof t};if(r(e.toCropImgX)&&r(e.toCropImgY)&&e.toCropImgW>0&&e.toCropImgH>0){var n=e.toCropImgW*e.imgChangeRatio,a=e.toCropImgH*e.imgChangeRatio,i=this._getCanvas(n,a),g=(i.getContext("2d").drawImage(t,0,0,e.toCropImgW,e.toCropImgH,0,0,n,a),this._getImageType(t.src));o(i.toDataURL(g,e.compress/100))}},_loadImage:function(t,e){var o=new Image;o.src=t,o.onload=function(){e(o)},o.onerror=function(){console.log("Error: image error!")}},_getCanvas:function(t,e){var o=document.createElement("canvas");return o.width=t,o.height=e,o}}}})});
\ No newline at end of file
diff --git a/dist/lib/drag.js b/dist/lib/drag.js
new file mode 100644
index 0000000..0f90314
--- /dev/null
+++ b/dist/lib/drag.js
@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.VueCoreImageUpload=t():e.VueCoreImageUpload=t()}(this,function(){return function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=12)}({0:function(e,t,n){"use strict";e.exports={isMobile:/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),setCssText:function(e){var t=[];for(var n in e){var o=e[n];"number"==typeof o&&(o+="px"),t.push(n+": "+o+";")}return t.join("")}}},12:function(e,t,n){"use strict";function o(e,t,n){if(t){var o=u?e.changedTouches[0].clientX:e.clientX,r=u?e.changedTouches[0].clientY:e.clientY,i=o-t.parentElement.offsetLeft-n.x,f=r-t.parentElement.offsetTop-document.getElementsByClassName("image-aside")[0].offsetTop-n.y;return i<=0&&(i=0),i>=n.maxLeft&&(i=n.maxLeft),f<=0&&(f=0),f>=n.maxTop&&(f=n.maxTop),{left:i,top:f}}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=o;var r=n(0),i=function(e){return e&&e.__esModule?e:{default:e}}(r),u=i.default.isMobile}})});
\ No newline at end of file
diff --git a/dist/lib/helper.js b/dist/lib/helper.js
new file mode 100644
index 0000000..7018694
--- /dev/null
+++ b/dist/lib/helper.js
@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.VueCoreImageUpload=t():e.VueCoreImageUpload=t()}(this,function(){return function(e){function t(o){if(r[o])return r[o].exports;var n=r[o]={i:o,l:!1,exports:{}};return e[o].call(n.exports,n,n.exports,t),n.l=!0,n.exports}var r={};return t.m=e,t.c=r,t.i=function(e){return e},t.d=function(e,r,o){t.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,r){"use strict";e.exports={isMobile:/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),setCssText:function(e){var t=[];for(var r in e){var o=e[r];"number"==typeof o&&(o+="px"),t.push(r+": "+o+";")}return t.join("")}}}])});
\ No newline at end of file
diff --git a/dist/lib/loading-gif.js b/dist/lib/loading-gif.js
new file mode 100644
index 0000000..73a1290
--- /dev/null
+++ b/dist/lib/loading-gif.js
@@ -0,0 +1 @@
+!function(A,Q){"object"==typeof exports&&"object"==typeof module?module.exports=Q():"function"==typeof define&&define.amd?define([],Q):"object"==typeof exports?exports.VueCoreImageUpload=Q():A.VueCoreImageUpload=Q()}(this,function(){return function(A){function Q(C){if(o[C])return o[C].exports;var g=o[C]={i:C,l:!1,exports:{}};return A[C].call(g.exports,g,g.exports,Q),g.l=!0,g.exports}var o={};return Q.m=A,Q.c=o,Q.i=function(A){return A},Q.d=function(A,o,C){Q.o(A,o)||Object.defineProperty(A,o,{configurable:!1,enumerable:!0,get:C})},Q.n=function(A){var o=A&&A.__esModule?function(){return A.default}:function(){return A};return Q.d(o,"a",o),o},Q.o=function(A,Q){return Object.prototype.hasOwnProperty.call(A,Q)},Q.p="",Q(Q.s=13)}({13:function(A,Q,o){"use strict";Object.defineProperty(Q,"__esModule",{value:!0});Q.default="data:image/gif;base64,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"}})});
\ No newline at end of file
diff --git a/dist/lib/resize.js b/dist/lib/resize.js
new file mode 100644
index 0000000..e532e60
--- /dev/null
+++ b/dist/lib/resize.js
@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.VueCoreImageUpload=t():e.VueCoreImageUpload=t()}(this,function(){return function(e){function t(n){if(i[n])return i[n].exports;var o=i[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var i={};return t.m=e,t.c=i,t.i=function(e){return e},t.d=function(e,i,n){t.o(e,i)||Object.defineProperty(e,i,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var i=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(i,"a",i),i},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=21)}({0:function(e,t,i){"use strict";e.exports={isMobile:/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),setCssText:function(e){var t=[];for(var i in e){var n=e[i];"number"==typeof n&&(n+="px"),t.push(i+": "+n+";")}return t.join("")}}},21:function(e,t,i){"use strict";function n(e,t,i,n,o){if(t){var r=document.body.offsetHeight,d=1/o,s=parseInt(window.getComputedStyle(i).width),f=parseInt(window.getComputedStyle(i).height),c=document.querySelector(".info-aside"),a=(u-s)/2,l=parseInt(window.getComputedStyle(c).height),p=(r-f-l)/2,g=h?e.changedTouches[0].clientX:e.clientX,w=h?e.changedTouches[0].clientY:e.clientY,y=parseInt(t.offsetWidth),b=parseInt(t.offsetHeight),x={};return o>=1&&g<=a+s?(y>=s&&(x.width=s),x.width=n.w+g-n.x,x.height=y*d,s>f?y>f&&(x.height=f,x.width=f*o):s<f?y>s&&(x.width=s,x.height=s*d):y>=s&&(x.width=s,x.height=s*d)):o<1&&w<p+f+l?(x.height=n.h+w-n.y,x.width=parseInt(t.style.height)*o,s>f?b>f&&(x.height=f,x.width=f*o):y>s&&(x.width=s,x.height=s*d)):"auto"==o&&w<=p+f+l&&g<=p+s?(x.height=n.h+w-n.y,x.width=n.w+g-n.x):g<=a+s&&(x.width=n.w+g-n.x,x.height=t.style.width,s>f?b>f&&(x.height=f,x.width=f):s<f?y>s&&(x.width=s,x.height=s):y>s&&(x.width=t.style.height=s)),x}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=n;var o=i(0),r=function(e){return e&&e.__esModule?e:{default:e}}(o),h=r.default.isMobile,u=document.body.offsetWidth}})});
\ No newline at end of file
diff --git a/dist/lib/xhr.js b/dist/lib/xhr.js
new file mode 100644
index 0000000..4abce26
--- /dev/null
+++ b/dist/lib/xhr.js
@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.VueCoreImageUpload=t():e.VueCoreImageUpload=t()}(this,function(){return function(e){function t(n){if(o[n])return o[n].exports;var r=o[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var o={};return t.m=e,t.c=o,t.i=function(e){return e},t.d=function(e,o,n){t.o(e,o)||Object.defineProperty(e,o,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var o=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(o,"a",o),o},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=22)}({22:function(e,t,o){"use strict";var n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};void 0===XMLHttpRequest.prototype.sendAsBinary&&(XMLHttpRequest.prototype.sendAsBinary=function(e){var t=Array.prototype.map.call(e,function(e){return 255&e.charCodeAt(0)});this.send(new Uint8Array(t).buffer)}),e.exports=function(e,t,o,r,s,a,i){function u(e){for(var t={},o=/([a-z\-]+):\s?(.*);?/gi,n=void 0;n=o.exec(e);)t[n[1]]=n[2];return t}var p=new XMLHttpRequest,f=a||function(){console.error("AJAX ERROR!")},c="vuecodeimageupload",l=!1;"blob"===e&&(l=e,e="GET"),console.log(r),e=e.toUpperCase(),p.onload=function(){var t=p.response;try{t=JSON.parse(p.responseText)}catch(e){401===p.status&&(t=f("access_denied",p.statusText))}var o=u(p.getAllResponseHeaders());o.statusCode=p.status,s(t||("GET"===e?f("empty_response","Could not get resource"):{}),o)},p.onerror=function(){var e=p.responseText;try{e=JSON.parse(p.responseText)}catch(e){console.error(e)}s(e||f("access_denied","Could not get resource"))};var d=void 0;if("GET"===e||"DELETE"===e)r=null;else if(i){var y=r,m=r.base64Code.replace("data:"+r.type+";base64,","");r=["--"+c,'Content-Disposition: form-data; name="'+r.filed+'"; filename="'+r.filename+'"',"Content-Type: "+r.type,"",window.atob(m),""].join("\r\n");var b=Object.keys(y);if(b.length>4){var v=!0,x=!1,C=void 0;try{for(var T,g=b[Symbol.iterator]();!(v=(T=g.next()).done);v=!0){var h=T.value;-1==["filed","filename","type","base64Code"].indexOf(h)&&(r+=["--"+c,'Content-Disposition: form-data; name="'+h+'";',"",""].join("\r\n"),r+=["object"===n(y[h])?JSON.stringify(y[h]):y[h],""].join("\r\n"))}}catch(a){x=!0,C=a}finally{try{!v&&g.return&&g.return()}finally{if(x)throw C}}}r+="--"+c+"--"}if(p.open(e,t,!0),l&&("responseType"in p?p.responseType=l:p.overrideMimeType("text/plain; charset=x-user-defined")),o){for(d in o)p.setRequestHeader(d,o[d]);i&&p.setRequestHeader("Content-Type","multipart/form-data; boundary="+c)}return i?p.sendAsBinary(r):(p.withCredentials=!0,p.send(r),p)}}})});
\ No newline at end of file
diff --git a/dist/props.js b/dist/props.js
new file mode 100644
index 0000000..ebfd035
--- /dev/null
+++ b/dist/props.js
@@ -0,0 +1,93 @@
+export default {
+  url: {
+    type: String,
+  },
+  text: {
+    type:String,
+    default:  'Upload Image'
+  },
+  extensions: {
+    type: String,
+    default:'png.jpg,jpeg,gif,svg,webp'
+  },
+  inputOfFile: {
+    type: String,
+    default: 'files'
+  },
+  crop: {
+    type: [String, Boolean],
+    default: ''
+  },
+  cropBtn: {
+    type: Object,
+    default: function() {
+      return {
+        ok: 'Ok',
+        cancel: 'Cancel',
+      }
+    }
+  },
+  cropRatio: {
+    type: String,
+    default: '1:1'
+  },
+  resize: {
+    type: [String, Boolean],
+    default: false,
+  },
+  ResizeBtn: {
+    type: Object,
+    default: function() {
+      return {
+        ok: 'Ok',
+        cancel: 'Cancel'
+      }
+    }
+  },
+  maxFileSize:{
+    type: Number,
+    default: 1024 * 1024 * 100,
+  },
+  maxWidth:{
+    type: Number,
+  },
+  maxHeight:{
+    type: Number,
+  },
+  inputAccept:{
+    type: String,
+    default: 'image/jpg,image/jpeg,image/png'
+  },
+  isXhr: {
+    type: Boolean,
+    default: true
+  },
+  headers: {
+    type: Object,
+    default: function() {
+      return {};
+    }
+  },
+  data: {
+    type: Object,
+    default: function() {
+      return {};
+    }
+  },
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  multipleSize: {
+    type: Number,
+    default: 0
+  },
+  minWidth: {
+    type: Number,
+    default: 50,
+  },
+  compress: {
+    type: [Number, String],
+    default: 0,
+  }
+}
diff --git a/dist/resize-bar.vue b/dist/resize-bar.vue
new file mode 100644
index 0000000..5400341
--- /dev/null
+++ b/dist/resize-bar.vue
@@ -0,0 +1,127 @@
+<template>
+  <div class="g-resize-bar">
+    <div class="g-resize-highlight" :style="{width: left + '%',}"></div>
+    <button class="circle-btn" @touchstart.self="drag" @mousedown.self="drag" :style="{left: left + '%',}"></button>
+  </div>
+</template>
+
+<style scoped>
+  .g-resize-bar{
+    position: absolute;
+    margin: 17px auto;
+    height: 6px;
+    border-radius: 3px;
+    width:200px;
+    margin-left: -100px;
+    left: 50%;
+    background-color: #ddd;
+  }
+  .g-resize-highlight{
+    position: absolute;
+    left: 0;
+    top:0;
+    height: 6px;
+    background-color: #27ae60;
+    border-radius: 3px;
+  }
+  .circle-btn{
+    display: block;
+    position: absolute;
+    left:0;
+    top: -5px;
+    width: 14px;
+    height: 14px;
+    margin-left: -7px;
+    background-color: #fff;
+    border-radius: 7px;
+    box-shadow: 0 2px 4px -2px rgba(0,0,0,.5), 0 -2px 4px -2px rgba(0,0,0,.45);
+    border-width: 0;
+  }
+
+  @media all and (max-width:480px) {
+    .g-resize-bar{
+      width:120px;
+      margin-left: auto;
+      left:10px;
+    }
+
+  }
+</style>
+
+<script>
+import helper from './lib/helper';
+import drag from './lib/drag';
+
+export default {
+  props: {
+    minProgress: {
+      type:[Number, String],
+      default: 0,
+    }
+
+  },
+  data() {
+    return {
+      progress: 100,
+      left: 100,
+    }
+  },
+
+  methods: {
+    setRatio(num) {
+      this.progress = 100;
+      this.left = 100;
+    },
+
+    drag(e) {
+      e.preventDefault();
+      const $el = e.target;
+      this.el = $el;
+      const $container = this.$el.parentElement;
+      const self = this;
+      const isMobile = helper.isMobile;
+      const width = document.querySelector('.g-resize-bar').offsetWidth;
+      const coor = {
+        x: (isMobile ? e.touches[0]['clientX'] : e.clientX) - $el.offsetLeft - $el.parentElement.offsetLeft,
+        y: (isMobile ? e.touches[0]['clientY'] : e.clientY) - $el.offsetTop - $el.parentElement.offsetTop,
+        posX: isMobile ? e.touches[0]['clientX'] : e.clientX,
+        posy: isMobile ? e.touches[0]['clientY'] : e.clientY,
+        maxLeft: width,
+        maxTop: parseInt($container.style.height) - parseInt($el.style.height),
+      };
+      const move = function (ev) {
+        const newCoor = drag(ev, self.el, coor);
+        if (newCoor) {
+          if((newCoor.left / width) < self.minProgress) {
+            return;
+          }
+          self.progress = newCoor.left / width;
+          self.left = newCoor.left / width * 100;
+
+          self.$emit('resize', self.progress);
+        }
+      };
+      const stopMove = function (ev) {
+        self.el = null;
+        if (isMobile) {
+          document.removeEventListener('touchmove', move, false);
+          document.removeEventListener('touchend', stopMove, false);
+          return;
+        }
+        document.removeEventListener('mousemove', move, false);
+        document.removeEventListener('mouseup', stopMove, false);
+      };
+      if (isMobile) {
+        document.addEventListener('touchmove', move, false);
+        document.addEventListener('touchend', stopMove, false);
+        return;
+      }
+      document.addEventListener('mousemove', move, false);
+      document.addEventListener('mouseup', stopMove, false);
+    }
+
+  },
+
+
+};
+</script>
diff --git a/dist/style/style.css b/dist/style/style.css
new file mode 100644
index 0000000..f193446
--- /dev/null
+++ b/dist/style/style.css
@@ -0,0 +1,110 @@
+.g-core-image-upload-btn{
+  position: relative;
+  overflow: hidden;
+}
+.g-core-image-upload-form{
+  position: absolute;
+  left:0;
+  right: 0;
+  top:0;
+  bottom:0;
+  opacity: 0;
+}
+.g-core-image-upload-container{
+  position: absolute;
+  background: #111;
+  z-index: 900;
+}
+.g-core-image-upload-modal{
+  position: absolute;
+  left:0;
+  right:0;
+  width: 100%;
+  height: 100%;
+  border:1px solid #ccc;
+  z-index: 899;
+}
+.dropped{
+  border:4px solid #ea6153;
+}
+
+.g-core-image-corp-container{
+  z-index: 1900;
+  position:fixed;
+  left:0;
+  right:0;
+  top:0;
+  bottom: 0;
+  background: rgba(0,0,0,.9);
+  color:#f1f1f1;
+}
+.g-core-image-corp-container .image-aside{
+  position: absolute;
+  right: 30px;
+  left:30px;
+  top:60px;
+  bottom:20px;
+  text-align: center;
+}
+.g-core-image-corp-container .image-aside img{
+  max-width: 100%;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.g-core-image-corp-container .info-aside{
+  position: absolute;
+  left:0;
+  right: 0;
+  top:0;
+  height: 40px;
+  padding-left: 10px;
+  padding-right: 10px;
+  background: #fefefe;
+  color:#777;
+}
+.g-core-image-corp-container .btn-groups{
+  text-align: right;
+  margin: 5px 0 0;
+}
+.g-core-image-corp-container .btn{
+  display: inline-block;
+  padding: 0 15px;
+  height: 32px;
+  margin-left: 15px;
+  background: #fff;
+  border:1px solid #ccc;
+  border-radius: 2px;
+  font-size: 13px;
+  color:#222;
+  line-height: 32px;
+  transition: all .1s ease-in;
+}
+.g-core-image-corp-container .btn:hover{
+  border:1px solid #777;
+  box-shadow: 0 1px 3px rgba(0,0,0,.05);
+}
+.g-core-image-corp-container .btn:active{
+  background: #ddd;
+}
+.g-core-image-corp-container .btn:disabled{
+  background: #eee !important;
+  border-color:#ccc;
+  cursor: not-allowed;
+}
+.g-core-image-corp-container .btn-upload{
+  background: #27ae60;
+  border-color:#27ae60;
+  color:#fff;
+}
+.g-core-image-corp-container .btn-upload:hover{
+  background: #2dc26c;
+  border-color:#27ae60;
+  box-shadow: 0 1px 3px rgba(0,0,0,.05);
+}
+.g-core-image-corp-container .g-crop-image-box,.g-core-image-corp-container .g-crop-image-box .g-crop-image-principal{
+  position: relative;
+}
diff --git a/dist/vue-core-image-upload.vue b/dist/vue-core-image-upload.vue
new file mode 100644
index 0000000..06345c0
--- /dev/null
+++ b/dist/vue-core-image-upload.vue
@@ -0,0 +1,273 @@
+<template>
+  <div class="g-core-image-upload-btn">
+    <slot>{{text}}</slot>
+    <form class="g-core-image-upload-form" v-show="!hasImage" method="post" enctype="multipart/form-data" action="/api2/common_user/cropHeadUrl" style="display: block; cursor: pointer; position: absolute; left: 0px; top: 0px; width: 1242px; height: 61px; opacity: 0; margin: 0px; padding: 0px; overflow: hidden;">
+      <input v-bind:disabled="uploading" v-bind:id="'g-core-upload-input-' + formID" v-bind:name="name" v-bind:multiple="multiple" type="file" v-bind:accept="inputAccept" v-on:change="change" style="width: 100%; height: 100%;">
+    </form>
+    <div class="g-core-image-corp-container" v-bind:id="'vciu-modal-' + formID" v-show="hasImage">
+      <div class="image-aside">
+        <div class="g-crop-image-box">
+          <crop :form-id="formID" ref="cropBox" :hide-crop="resize" :ratio="cropRatio"></crop>
+        </div>
+      </div>
+      <div class="info-aside">
+        <resize-bar v-if="resize" :min-progress="image.minProgress" ref="resizeBar" @resize="resizeImage"></resize-bar>
+        <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>
+        </p>
+        <p class="btn-groups" v-if="resize">
+          <button type="button" v-on:click="doResize" class="btn btn-upload">{{ResizeBtn.ok}}</button>
+          <button type="button" v-on:click="cancel" class="btn btn-cancel">{{ResizeBtn.cancel}}</button>
+        </p>
+      </div>
+  </div>
+</div>
+</template>
+
+<style src="./style/style.css">
+</style>
+
+<script>
+  import xhr from './lib/xhr';
+  import GIF_LOADING_SRC from './lib/loading-gif';
+  import canvasHelper from './lib/canvas-helper';
+  import props from './props';
+  import Crop from './crop.vue';
+  import ResizeBar from './resize-bar.vue';
+
+  export default {
+    components: {
+      Crop,
+      ResizeBar
+    },
+    props: props,
+    data() {
+      return {
+        files: [],
+        hasImage: false,
+        options: this.props,
+        uploading: false,
+        formID: (Math.random() * 10000 + '').split('.')[0],
+        image:{
+          src: GIF_LOADING_SRC,
+          width:24,
+          height:24,
+          minProgress: 0.05,
+        },
+      }
+    },
+
+    computed: {
+      name() {
+        if(this.multiple) {
+          return this.inputOfFile + '[]';
+        }
+        return this.inputOfFile;
+      }
+    },
+
+    methods: {
+      __dispatch(name,res) {
+        this.$emit && this.$emit(name, res);
+      },
+      __find(str) {
+        let dq = document.querySelector('#vciu-modal-' + this.formID);
+        return dq.querySelector(str);
+      },
+      change(e) {
+        let fileVal = document.querySelector('#g-core-upload-input-' + this.formID).value.replace(/C:\\fakepath\\/i, "");
+        let fileExt = fileVal.substring(fileVal.lastIndexOf(".") + 1);
+        const extensionsArr = this.extensions.split(',');
+        if(extensionsArr.length>1) {
+            var reg = new RegExp('^[' + extensionsArr.join('|') + ']+$','i');
+            if (!reg.test(fileExt)) {
+                return this.__dispatch('errorhandle','TYPE ERROR');
+            }
+        }
+        if (e.target.files[0].size > this.maxFileSize) {
+            var formatSize;
+            if (parseInt(this.maxFileSize / 1024 / 1024) > 0) {
+                formatSize = (this.maxFileSize / 1024 / 1024).toFixed(2) + 'MB';
+            } else if (parseInt(this.maxFileSize / 1024) > 0) {
+                formatSize = (this.maxFileSize / 1024).toFixed(2) + 'kB';
+            } else {
+                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);
+        }
+
+        this.files = e.target.files;
+        if(this.crop || this.resize) {
+          this.__showImage();
+          return;
+        }
+        this. __dispatch('imagechanged', this.files[0]);
+        if (this.compress) {
+          canvasHelper.compress(this.files[0], 100 - this.compress, (code) => {
+            this.tryAjaxUpload('', true, code);
+          });
+        } else {
+          this.tryAjaxUpload();
+        }
+      },
+      __showImage() {
+        this.hasImage = true;
+        this.__readFiles();
+      },
+
+       __readFiles() {
+        let reader = new FileReader();
+        let self = this;
+        reader.onload = function(e) {
+          let src = e.target.result;
+          self.__initImage(src);
+        }
+        reader.readAsDataURL(this.files[0]);
+      },
+
+      // set the image size
+      __initImage(src) {
+        let pic = new Image();
+        let self = this;
+        pic.src = src;
+        const cropBox = this.$refs.cropBox;
+        const resizeBar = this.$refs.resizeBar;
+        pic.onload= function() {
+          self.image.minProgress = self.minWidth / pic.naturalWidth;
+          self.imgChangeRatio = cropBox.setImage(src, pic.naturalWidth, pic.naturalHeight);
+          if (resizeBar) {
+            resizeBar.setRatio(self.imgChangeRatio);
+          }
+
+        }
+      },
+
+      resizeImage(progress) {
+        const cropBox = this.$refs.cropBox;
+        cropBox.resizeImage(progress);
+      },
+
+      doCrop(e) {
+        this.__setData('crop');
+        const cropBox = this.$refs.cropBox;
+        const upload = this.__setUpload(e.target);
+        if (this.crop === 'local') {
+          const targetImage = cropBox.getCropImage();
+          this.data.comprose = 100 - this.compress;
+          return canvasHelper.crop(targetImage, this.data, (code) => {
+            upload(code);
+          })
+        }
+        upload();
+
+      },
+
+      doResize(e) {
+        this.__setData('reszie');
+        const cropBox = this.$refs.cropBox;
+        const upload = this.__setUpload(e.target);
+        if (this.resize === 'local') {
+          const targetImage = cropBox.getCropImage();
+          this.data.comprose = 100 - this.compress;
+          return canvasHelper.resize(targetImage, this.data, (code) => {
+            upload(code);
+          })
+        }
+        upload();
+      },
+
+      __setData(type) {
+        if (typeof this.data !== 'object') {
+          this.data = {};
+        }
+        this.data["request"] = type;
+        const cropBox = this.$refs.cropBox;
+        const newCSSObj = cropBox.getCropData();
+        for (const k of Object.keys(newCSSObj)) {
+          this.data[k] = newCSSObj[k];
+        }
+        if (this.maxWidth) {
+          this.data['maxWidth'] = this.maxWidth;
+        }
+        if (this.maxHeight) {
+          this.data['maxHeight'] = this.maxHeight;
+        }
+        if (this.minWidth) {
+          this.data['minWidth'] = this.minWidth;
+        }
+      },
+
+      __setUpload(btn) {
+        btn.value = btn.value + '...';
+        btn.disabled = true;
+
+        const upload = (code) => {
+          this.tryAjaxUpload(() => {
+            btn.value = btn.value.replace('...','');
+            btn.disabled = false;
+          }, code ? true: false, code);
+        };
+        return upload;
+      },
+
+      cancel() {
+        this.hasImage = false;
+        this.files = '';
+        document.querySelector('#g-core-upload-input-' + this.formID).value = '';
+      },
+
+      // use ajax upload  IE10+
+      tryAjaxUpload(callback, isBinary, base64Code) {
+        const self = this;
+        this. __dispatch('imageuploading',this.files[0]);
+        const done = function(res) {
+          if(typeof callback === 'function') {
+            callback();
+          }
+          self.uploading = false;
+          self.cancel();
+          self.__dispatch('imageuploaded',res);
+        };
+        const errorUpload = function(err) {
+          self.__dispatch('errorhandle', err);
+        };
+        if (!this.isXhr) {
+          if(this.crop) {
+            this.hasImage = false;
+          }
+          return typeof callback === 'function' && callback();
+        }
+        let data;
+        if (isBinary) {
+          data = {
+            type: this.files[0]['type'],
+            filename: this.files[0]['name'],
+            filed: this.inputOfFile,
+            base64Code: base64Code
+          };
+          if (typeof this.data === 'object') {
+            data = Object.assign(this.data, data);
+          }
+        } else {
+          data = new FormData();
+          for (let i=0;i<this.files.length;i++) {
+            data.append(this.name, this.files[i]);
+          }
+          if (typeof this.data === 'object') {
+            for(let k in this.data) {
+              if(this.data[k] !== undefined) {
+                data.append(k,this.data[k]);
+              }
+            }
+          }
+        }
+
+        xhr('POST',this.url, this.headers, data, done, errorUpload, isBinary);
+      },
+    },
+
+  };
+
+</script>
diff --git a/site/client/components/Header.vue b/site/client/components/Header.vue
index 00cbdf3..dfe0c21 100644
--- a/site/client/components/Header.vue
+++ b/site/client/components/Header.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="nav">
       <div class="container">
+          <div class="menu" @click="toggleMenu">
+            <svg class="svg-icon" viewBox="0 0 1024 1024"><g><path d="M810.667 725.333h-597.333c-47.061 0-85.333 38.272-85.333 85.333s38.272 85.333 85.333 85.333h597.333c47.061 0 85.333-38.272 85.333-85.333s-38.272-85.333-85.333-85.333z"></path><path d="M810.667 426.667h-597.333c-47.061 0-85.333 38.272-85.333 85.333s38.272 85.333 85.333 85.333h597.333c47.061 0 85.333-38.272 85.333-85.333s-38.272-85.333-85.333-85.333z"></path><path d="M810.667 128h-597.333c-47.061 0-85.333 38.272-85.333 85.333s38.272 85.333 85.333 85.333h597.333c47.061 0 85.333-38.272 85.333-85.333s-38.272-85.333-85.333-85.333z"></path></g></svg>
+          </div>
           <div class="nav-logo"></div>
           <div class="nav-list">
               <a href="https://github.com/Vanthink-UED/vue-core-image-upload/issues">Issues</a>
@@ -12,12 +15,11 @@
                 </svg>
               </a>
           </div>
+
       </div>
   </div>
 </template>
 
-<style></style>
-
 <script>
 import vueSelect from 'vue-select'
 import vendor from '../lib/vendor'
@@ -50,6 +52,17 @@ export default {
           }
         ]
     }
+  },
+
+  methods: {
+    toggleMenu() {
+      const $aside = document.querySelector('aside');
+      if ($aside.className.indexOf('active') > -1) {
+        $aside.className = '';
+      } else {
+        $aside.className = 'active';
+      }
+    }
   }
 
 };
diff --git a/site/client/components/NavList.vue b/site/client/components/NavList.vue
index 6ee8923..f148d17 100644
--- a/site/client/components/NavList.vue
+++ b/site/client/components/NavList.vue
@@ -19,10 +19,10 @@ const lan = vendor.getLocalData('lan') || 'cn';
 for(var item of routers) {
   item.url = '#/' + lan + '/' + item.url;
   if (lan !== 'en') {
-    item.name = item.cn_name;  
+    item.name = item.cn_name;
   }
 }
-  
+
 export default {
   data() {
     return {
@@ -31,12 +31,14 @@ export default {
     }
 
   },
-  
+
   methods: {
     setUrl(url) {
-      this.url = url;  
+      this.url = url;
+      const $aside = document.querySelector('aside');
+      $aside.className = '';
     },
-    
+
   }
 
 }
diff --git a/site/client/components/doc/en/CropImage.vue b/site/client/components/doc/en/CropImage.vue
index 34eb27a..5acfb04 100644
--- a/site/client/components/doc/en/CropImage.vue
+++ b/site/client/components/doc/en/CropImage.vue
@@ -83,7 +83,7 @@
 </template>
 
 <script>
-import VueCoreImageUpload from '../../../../src/vue-core-image-upload.vue';
+import VueCoreImageUpload from 'vue-core-image-upload';
 
 export default {
   components: {
diff --git a/site/client/components/doc/en/MultipleFile.vue b/site/client/components/doc/en/MultipleFile.vue
index 3467491..687e141 100644
--- a/site/client/components/doc/en/MultipleFile.vue
+++ b/site/client/components/doc/en/MultipleFile.vue
@@ -4,7 +4,7 @@
     <p>Set <code>multiple</code> equal <code>true</code>, and you could select more than one file. And your server will recieved an array of files.</p>
     <h4>multiple-size</h4>
     <p><code>multiple-size</code>  is a number which limits your count of the files you selected.</p>
-    <h4>演示</h4>
+    <h4>Demo</h4>
     <div class="center">
       <vue-core-image-upload
         class="btn btn-primary"
diff --git a/site/client/less/modules/m-layout.less b/site/client/less/modules/m-layout.less
index a041c56..45a922e 100644
--- a/site/client/less/modules/m-layout.less
+++ b/site/client/less/modules/m-layout.less
@@ -1,7 +1,7 @@
 /** layout **/
 .container {
     position: relative;
-    width: 1170px;
+    max-width: 1140px;
     margin: 0 auto;
 }
 
@@ -40,6 +40,9 @@
     color: #fff;
 }
 
+.menu{
+  display: none;
+}
 .nav-list {
     float: right;
     z-index: 100;
@@ -52,6 +55,7 @@
 }
 
 
+
 .nav-list a {
     text-decoration: none;
     font-size: 14px;
@@ -103,6 +107,8 @@ aside{
 
 }
 
+
+
 .main{
     margin-left: 240px;
     max-width: 900px;
@@ -147,3 +153,59 @@ aside{
     color: @emerald;
   }
 }
+
+@media all and (max-width: 764px) {
+  .nav{
+    height: 40px;
+    line-height: 40px;
+
+  }
+  .menu {
+    margin-left: 10px;
+    margin-top: 4px;
+    display: inline-block;
+    .svg-icon{
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  .nav-logo {
+    display: none;
+  }
+  .nav-list{
+    margin-top: 0;
+  }
+
+
+  aside{
+    z-index: 9;
+    position: fixed;
+    left: -250px;
+    top: 40px;
+    bottom: 0;
+    padding: 10px;
+    background-color: #fff;
+    box-shadow: 3px 4px 5px rgba(0,0,0,.25);
+    transition: left ease .25s;
+    &.active{
+      left: 0;
+    }
+    h4, ul {
+      background-color: #fff;
+    }
+
+  }
+  .main {
+    margin-left: 10px;
+    padding-top: 60px;
+  }
+
+  .ft .icon-list a{
+    width: 40px;
+    margin: 15px;
+    img{
+      width: 100%;
+    }
+  }
+}
diff --git a/site/src/vue-core-image-upload.vue b/site/src/vue-core-image-upload.vue
index d364632..4790943 100644
--- a/site/src/vue-core-image-upload.vue
+++ b/site/src/vue-core-image-upload.vue
@@ -31,6 +31,7 @@
   import Crop from './crop.vue';
   import ResizeBar from './resize-bar.vue';
 
+  let overflowVal = '';
   export default {
     components: {
       Crop,
@@ -98,7 +99,7 @@
           this.__showImage();
           return;
         }
-        this. __dispatch('imagechanged', this.files[0]);
+        this. __dispatch('imagechanged', this.files.length > 1 ? this.files : this.files[0]);
         if (this.compress && this.files[0]['type'] !== 'image/png' && this.files[0]['type'] !== 'image/gif') {
           canvasHelper.compress(this.files[0], 100 - this.compress, (code) => {
             this.tryAjaxUpload('', true, code);
@@ -112,15 +113,15 @@
         this.__readFiles();
       },
 
-       __readFiles() {
+      __readFiles() {
         let reader = new FileReader();
         let self = this;
         reader.onload = function(e) {
           let src = e.target.result;
+          overflowVal = document.body.style.overflow;
           document.body.style.overflow = 'hidden';
           self.__initImage(src);
         }
-
         reader.readAsDataURL(this.files[0]);
       },
 
@@ -205,6 +206,7 @@
 
       cancel() {
         this.hasImage = false;
+        document.body.style.overflow = overflowVal;
         this.files = '';
         document.querySelector('#g-core-upload-input-' + this.formID).value = '';
       },
diff --git a/src/vue-core-image-upload.vue b/src/vue-core-image-upload.vue
index d364632..4790943 100644
--- a/src/vue-core-image-upload.vue
+++ b/src/vue-core-image-upload.vue
@@ -31,6 +31,7 @@
   import Crop from './crop.vue';
   import ResizeBar from './resize-bar.vue';
 
+  let overflowVal = '';
   export default {
     components: {
       Crop,
@@ -98,7 +99,7 @@
           this.__showImage();
           return;
         }
-        this. __dispatch('imagechanged', this.files[0]);
+        this. __dispatch('imagechanged', this.files.length > 1 ? this.files : this.files[0]);
         if (this.compress && this.files[0]['type'] !== 'image/png' && this.files[0]['type'] !== 'image/gif') {
           canvasHelper.compress(this.files[0], 100 - this.compress, (code) => {
             this.tryAjaxUpload('', true, code);
@@ -112,15 +113,15 @@
         this.__readFiles();
       },
 
-       __readFiles() {
+      __readFiles() {
         let reader = new FileReader();
         let self = this;
         reader.onload = function(e) {
           let src = e.target.result;
+          overflowVal = document.body.style.overflow;
           document.body.style.overflow = 'hidden';
           self.__initImage(src);
         }
-
         reader.readAsDataURL(this.files[0]);
       },
 
@@ -205,6 +206,7 @@
 
       cancel() {
         this.hasImage = false;
+        document.body.style.overflow = overflowVal;
         this.files = '';
         document.querySelector('#g-core-upload-input-' + this.formID).value = '';
       },