update

legeneek · Aug 5, 2016 · 29cdec2 · 29cdec2
1 parent e07feff
commit 29cdec2
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 58 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,5 @@
 # vue-image-clip
+
 Image clip component based on vue
 
 ## Build Setup
@@ -13,4 +14,29 @@ npm run dev
 # build for production with minification
 npm run build
 
-```
+```
+
+## Useage
+
+Just add CustomCropper.vue and SelectBox.vue to your project, then use it like this:
+
+```
+<template>
+  <div id="app">
+    <Custom-Cropper></Custom-Cropper>
+  </div>
+</template>
+
+<script>
+  import CustomCropper from './YourPath/CustomCropper';
+
+  export default {
+    components: {
+      CustomCropper
+    }
+  };
+</script>
+
+```
+
+modify the ui as you wish
diff --git a/src/components/CustomCropper.vue b/src/components/CustomCropper.vue
@@ -3,7 +3,7 @@
     <div class="overlay"></div>
     <div class="modal">
       <div class="modal-head">
-        <div class="head-wrap">标题XXX</div>
+        <div class="head-wrap">title</div>
       </div>
       <div class="modal-content clearfix">
         <div class="img-clip-wrap">
@@ -16,19 +16,19 @@
           </div>
           <div class="reset-img">
             <i class="icon-reset"></i>
-            <span>选择图片</span>
+            <span>select image</span>
             <input type="file" id="file_input" accept="image/*" @change="fileChange">
           </div>
         </div>
         <div class="img-preview-wrap">
           <div class="pre-container">
             <img id="clip_res_img">
           </div>
-          <div class="pre-info">展示效果如上所示</div>
+          <div class="pre-info">preview</div>
         </div>
       </div>
       <div class="modal-footer">
-        <a class="modal-btn btn-confirm" :href="clipData" download="crop.jpg">确认</a>
+        <a class="modal-btn btn-confirm" :href="clipData" download="crop.jpg">clip</a>
       </div>
     </div>
   </div>
@@ -129,7 +129,7 @@
         }
         this.$imgContainer.setAttribute('style', `width:${w}px;height:${h}px;top:${mt}px;`);
         this.$refs.box.rec = { w: rw, h: rh, l: 0, t: 0 };
-        this.$broadcast('containerSizeChange', { w, h });
+        this.$broadcast('imgSizeChange', { w, h });
       },
       clearSelect() {
         const box = this.$refs.box;
@@ -171,7 +171,7 @@
         bufferCanvas.width = computedRec.w;
         bufferCanvas.height = computedRec.h;
         bfx.drawImage(this.$srcImg, -computedRec.l, -computedRec.t, this.nw, this.nh);
-        this.clipData = bufferCanvas.toDataURL('image/jpeg', 0.9);
+        this.clipData = bufferCanvas.toDataURL('image/jpeg', 1);
       }
     }
   }
@@ -196,15 +196,6 @@
     line-height: 50px;
     border-bottom: 1px solid #e5e9ef;
   }
-  .icon-close {
-    position: absolute;
-    top: 16px;
-    right: 16px;
-    display: inline-block;
-    font-size: 20px;
-    color: #99a2aa;
-    transform: rotate(40deg);
-  }
   .modal-content {
     padding: 30px 40px 40px;
   }

diff --git a/src/components/SelectBox.vue b/src/components/SelectBox.vue
@@ -13,8 +13,6 @@
 </template>
 
 <script>
-  import { getLeft, getTop } from '../util'
-
   export default {
     props: {
       radio: {
@@ -54,7 +52,7 @@
       this.$shadowBox = this.$el.querySelectorAll('.shadow-box')[0];
       window.addEventListener('mouseup', this.disableDrag);
       window.addEventListener('mousemove', this.updateRec);
-      this.$on('containerSizeChange', function (o) {
+      this.$on('imgSizeChange', function (o) {
         this.$img.style.width = `${o.w}px`;
         this.$img.style.height = `${o.h}px`;
       })
@@ -64,10 +62,30 @@
       window.removeEventListener('mousemove', this.updateRec)
     },
     methods: {
+      getLeft(el) {
+        let left = el.offsetLeft;
+        let parent = el.offsetParent;
+
+        while (parent) {
+          left += parent.offsetLeft;
+          parent = parent.offsetParent;
+        }
+        return left;
+      },
+      getTop(el) {
+        let top = el.offsetTop;
+        let parent = el.offsetParent;
+
+        while (parent) {
+          top += parent.offsetTop;
+          parent = parent.offsetParent;
+        }
+        return top;
+      },
       initAction(name, x, y) {
         this.action = name;
-        this.pl = getLeft(this.$el);
-        this.pt = getTop(this.$el);
+        this.pl = this.getLeft(this.$el);
+        this.pt = this.getTop(this.$el);
         this.actionPoint = { x, y };
         this.referPoint = { x: this.rec.l, y: this.rec.t };
 

diff --git a/src/components/Slide.vue b/src/components/Slide.vue
@@ -7,7 +7,16 @@
 </template>
 
 <script>
-  import { getLeft } from '../util.js'
+  function getLeft(el) {
+    let left = el.offsetLeft;
+    let parent = el.offsetParent;
+
+    while (parent) {
+      left += parent.offsetLeft;
+      parent = parent.offsetParent;
+    }
+    return left;
+  }
 
   export default {
     props: {

diff --git a/src/util.js b/src/util.js