add center position

JackGit · Nov 14, 2016 · 34f8de6 · 34f8de6
1 parent 09ee2c9
commit 34f8de6
Show file tree

Hide file tree

Showing 18 changed files with 2,978 additions and 285 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 ## description
 
-this is a image loader UI component for Vue 2.X
+this is a image loader UI component for Vue 2.X. The image will be center positioned after loaded
 
 ## demo
 
@@ -89,6 +89,7 @@ VueImgLoader.config.width = 0;
 VueImgLoader.config.height = 0;
 VueImgLoader.config.backgroundColor = '';
 VueImgLoader.config.transition = '';
+VueImgLoader.config.centerType = 'cover'; // "cover", "contain"
 ```
 
 ## todo

diff --git a/dist/vue-img-loader.common.js b/dist/vue-img-loader.common.js
diff --git a/dist/vue-img-loader.min.js b/dist/vue-img-loader.min.js
diff --git a/example/image.jpg b/example/image.jpg
diff --git a/example/image_0.jpg b/example/image_0.jpg
diff --git a/example/image_1.jpg b/example/image_1.jpg
diff --git a/example/image_2.jpg b/example/image_2.jpg
diff --git a/example/index.html b/example/index.html
@@ -8,12 +8,11 @@
         font-family: arial;
       }
       .fade-enter-active, .fade-leave-active {
-        transition: opacity 2s
+        transition: opacity .3s
       }
       .fade-enter, .fade-leave-active {
         opacity: 0
       }
-
       .my-preview {
         position: relative;
         width: 100px;
@@ -23,35 +22,59 @@
         margin: 0 auto;
         top: 30%;
       }
+      button {
+        display: block;
+      }
     </style>
 </head>
 <body>
     <div id="mountNode">
       <p>This is vue-img-loader demo. Please set Network as Good 3G in devTools and refresh the page.</p>
-      <p>preview</p>
-      <vue-img-loader src="image.jpg" preview="preview.jpg" :blur-preview="false"></vue-img-loader>
+      <p>preview (cover center)</p>
+      <button @click="changeImage('cover')">CHANGE IMAGE</button>
+      <vue-img-loader :src="'image_' + coverIndex + '.jpg?cover'" :preview="'preview_' + coverIndex + '.jpg?cover'" :blur-preview="false"></vue-img-loader>
+      <p>preview (contain center)</p>
+      <button @click="changeImage('contain')">CHANGE IMAGE</button>
+      <vue-img-loader :src="'image_' + containIndex + '.jpg?contain'" :preview="'preview_' + containIndex + '.jpg?contain'" :blur-preview="false" center-type="contain"></vue-img-loader>
       <p>blur preview</p>
-      <vue-img-loader src="image.jpg" preview="preview.jpg"></vue-img-loader>
+      <button @click="changeImage('blur')">CHANGE IMAGE</button>
+      <vue-img-loader :src="'image_' + blurIndex + '.jpg?blur'" :preview="'preview_' + blurIndex + '.jpg?blur'"></vue-img-loader>
       <p>transition</p>
-      <vue-img-loader src="image.jpg" preview="preview.jpg" transition="fade"></vue-img-loader>
+      <button @click="changeImage('transition')">CHANGE IMAGE</button>
+      <vue-img-loader :src="'image_' + transitionIndex + '.jpg?transition'" :preview="'preview_' + transitionIndex + '.jpg?transition'" transition="fade"></vue-img-loader>
       <p>background color</p>
-      <vue-img-loader src="image.jpg" background-color="lightgrey"></vue-img-loader>
+      <button @click="changeImage('background')">CHANGE IMAGE</button>
+      <vue-img-loader :src="'image_' + backgroundIndex + '.jpg?background'" background-color="lightgrey"></vue-img-loader>
       <p>customize preview content</p>
-      <vue-img-loader src="image.jpg">
+      <button @click="changeImage('customize')">CHANGE IMAGE</button>
+      <vue-img-loader :src="'image_' + customizeIndex + '.jpg?customize'">
         <div class="my-preview">loading...</div>
       </vue-img-loader>
     </div>
     <script src="https://cdn.jsdelivr.net/vue/2.0.3/vue.js"></script>
     <script src="vue-img-loader.min.js"></script>
     <script>
 
-      VueImgLoader.config.width = 400;
-      VueImgLoader.config.height = 400;
+      VueImgLoader.config.width = 400
+      VueImgLoader.config.height = 400
 
       new Vue({
         el: '#mountNode',
+        data: {
+          coverIndex: 0,
+          containIndex: 0,
+          blurIndex: 0,
+          transitionIndex: 0,
+          backgroundIndex: 0,
+          customizeIndex: 0
+        },
         components: {
           'vue-img-loader': VueImgLoader
+        },
+        methods: {
+          changeImage: function (type) {
+            this[type + 'Index'] = (this[type + 'Index'] + 1) % 3
+          }
         }
       })
     </script>

diff --git a/example/preview.jpg b/example/preview.jpg
diff --git a/example/preview_0.jpg b/example/preview_0.jpg
diff --git a/example/preview_1.jpg b/example/preview_1.jpg
diff --git a/example/preview_2.jpg b/example/preview_2.jpg
diff --git a/example/vue-img-loader.min.js b/example/vue-img-loader.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-img-loader",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "",
   "main": "./dist/vue-img-loader.common.js",
   "author": "jack yang",
@@ -11,9 +11,10 @@
     "image-loader"
   ],
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "webpack --config webpack.as.umd.js && webpack"
   },
   "dependencies": {
+    "center-it": "^0.1.0",
     "stackblur-canvas": "^1.4.0"
   },
   "devDependencies": {

diff --git a/src/VueImgLoader.vue b/src/VueImgLoader.vue
@@ -12,30 +12,50 @@
     left: 0;
     width: 100%;
     height: 100%;
-  }
-  .vil-preview__img {
-    width: 100%;
-    height: 100%;
+    overflow: hidden;
   }
 </style>
 
 <template>
   <div :style="containerStyle">
-    <img v-show="!loading" class="vil-image" alt="" :src="src" ref="img">
+    <img v-show="imageReady" class="vil-image" alt="" src="" ref="image">
     <transition :name="transition">
-      <div v-if="loading" class="vil-preview">
-        <canvas  v-if="preview && blurPreview" ref="canvas"></canvas>
-        <img v-show="preview && !blurPreview" :src="preview" alt="" class="vil-preview__img" ref="preview">
+      <div v-if="!imageReady" class="vil-preview" ref="preview">
+        <canvas v-show="preview && previewReady && blurPreview" ref="canvas"></canvas>
+        <img v-show="preview && previewReady && !blurPreview" src="" alt="" ref="previewImage">
         <slot></slot>
       </div>
     </transition>
   </div>
 </template>
 
 <script>
-  import stackblur from 'stackblur-canvas';
-  import config from './config';
-  import CenterIt from './center-it';
+  import CenterIt from 'center-it'
+  import stackblur from 'stackblur-canvas'
+  import config from './config'
+
+  function _loadImage (url, callback) {
+    let image = new Image()
+    image.onload = function () {
+      callback && callback(image)
+    }
+    image.src = url
+  }
+
+  function _center (element, containerWidth, containerHeight, elementWidth, elementHeight, type) {
+    let centerIt = new CenterIt({
+      containerWidth: containerWidth,
+      containerHeight: containerHeight,
+      originWidth: elementWidth,
+      originHeight: elementHeight,
+      centerType: type
+    })
+    element.style.position = 'absolute'
+    element.style.top = centerIt.offset().top + 'px'
+    element.style.left = centerIt.offset().left + 'px'
+    element.style.width = centerIt.width() + 'px'
+    element.style.height = centerIt.height() + 'px'
+  }
 
   export default {
     props: {
@@ -80,9 +100,9 @@
         type: Boolean,
         default: () => config.lazy
       },
-      autoClip: {
-        type: Boolean,
-        default: true
+      centerType: {
+        type: String,
+        default: () => config.centerType
       }
     },
 
@@ -93,17 +113,33 @@
           overflow: 'hidden',
           display: 'inline-block'
         },
-        loading: true
+        loading: true,
+        imageReady: false,
+        previewReady: false
       };
     },
 
     mounted () {
-      this.setContainerStyle();
-      this.preview && this.loadPreview();
-      this.loadImage();
+      this.setContainerStyle()
+      this.load()
+    },
+
+    watch: {
+        src () {
+          this.load()
+        }
     },
 
     methods: {
+      load () {
+        this.imageReady = false
+        this.previewReady = false
+        this.loadPreview()
+        this.loadImage()
+      },
+      makeCenter (element, width, height) {
+        _center(element, this.width, this.height, width, height, this.centerType)
+      },
       setContainerStyle () {
         let parent = this.$el.parentElement;
 
@@ -116,55 +152,36 @@
           backgroundColor: this.backgroundColor || 'initial'
         };
       },
-      blurCanvas (preview) {
-        let canvas = this.$refs.canvas;
-        stackblur.image(preview, canvas, this.blurRadius, this.blurAlphaChannel);
-        canvas.style.width = '100%';
-        canvas.style.height = '100%';
-      },
       loadPreview () {
-        let preview = new Image();
-
-        preview.alt = '';
-        preview.src = this.preview;
-
-        if (!this.autoClip) {
-          preview.width = this.width;
-          preview.height = this.height;
+        if (!this.preview) {
+          return
         }
 
-        preview.onload = () => {
-          this.blurPreview && this.blurCanvas(preview);
-          if (this.autoClip) {
-            this.autoClipImage(this.$refs.preview, preview.naturalWidth, preview.naturalHeight)
+        _loadImage(this.preview, image => {
+          let previewImage = this.$refs.previewImage
+          if (this.blurPreview) {
+            this.blurCanvas(image)
+          } else {
+            this.makeCenter(previewImage, image.naturalWidth, image.naturalHeight)
+            previewImage.src = this.preview
           }
-        };
+          this.previewReady = true
+        })
       },
       loadImage () {
-        let image = new Image();
-
-        this.loading = true;
-        image.alt = '';
-        image.src = this.src;
-
-        if (!this.autoClip) {
-          image.width = this.width;
-          image.height = this.height;
-        }
-
-        image.onload = () => {
-          this.loading = false;
-          if (this.autoClip) {
-            this.autoClipImage(this.$refs.img, image.naturalWidth, image.naturalHeight)
-          }
-        };
+        _loadImage(this.src, img => {
+          let image = this.$refs.image
+          this.makeCenter(image, img.naturalWidth, img.naturalHeight)
+          image.src = this.src
+          this.imageReady = true
+        })
       },
-      autoClipImage (img, width, height) {
-        let center = new CenterIt(this.width, this.height, width, height, {type: 'cover'})
-        img.style.width = center.newWidth() + 'px'
-        img.style.height = center.newHeight() + 'px'
-        img.style.top = center.offset().top + 'px'
-        img.style.left = center.offset().left + 'px'
+      blurCanvas (previewImage) {
+        let canvas = this.$refs.canvas;
+        canvas.style.width = previewImage.naturalWidth + 'px'
+        canvas.style.height = previewImage.naturalHeight + 'px'
+        stackblur.image(previewImage, canvas, this.blurRadius, this.blurAlphaChannel)
+        this.makeCenter(canvas, previewImage.naturalWidth, previewImage.naturalHeight)
       }
     }
   }