'完成图片裁剪功能'

lin-xin · lin-xin · commit d1bd98352c6a · 2018-04-12T17:36:57.000+08:00
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
     "element-ui": "2.3.3",
     "mavon-editor": "^2.5.2",
     "vue": "^2.5.16",
-    "vue-core-image-upload": "2.1.11",
+    "vue-cropperjs": "^2.2.0",
     "vue-datasource": "1.0.12",
     "vue-quill-editor": "3.0.6",
     "vue-router": "^3.0.1",
diff --git a/src/components/page/Upload.vue b/src/components/page/Upload.vue
@@ -23,35 +23,63 @@
             </el-upload>
             <div class="content-title">支持裁剪</div>
             <div class="plugins-tips">
-                Vue-Core-Image-Upload：一款轻量级的vue上传插件，支持裁剪。
-                访问地址：<a href="https://github.com/Vanthink-UED/vue-core-image-upload" target="_blank">Vue-Core-Image-Upload</a>
+                vue-cropperjs：一个封装了 cropperjs 的 Vue 组件。
+                访问地址：<a href="https://github.com/Agontuk/vue-cropperjs" target="_blank">vue-cropperjs</a>
             </div>
-            <img class="pre-img" :src="src" alt="">
-            <vue-core-image-upload :class="['pure-button','pure-button-primary','js-btn-crop']"
-                :crop="true"
-                text="上传图片"
-                url="/api/posts/"
-                extensions="png,gif,jpeg,jpg"
-                @:imageuploaded="imageuploaded"
-                @:errorhandle="handleError"
-            ></vue-core-image-upload>
+            <div class="crop-demo">
+                <img :src="cropImg" class="pre-img">
+                <div class="crop-demo-btn">选择图片
+                    <input class="crop-input" type="file" name="image" accept="image/*" @change="setImage"/>
+                </div>
+            </div>
+        
+            <el-dialog title="裁剪图片" :visible.sync="dialogVisible" width="30%">
+                <vue-cropper ref='cropper' :src="imgSrc" :ready="cropImage" :zoom="cropImage" :cropmove="cropImage" style="width:100%;height:300px;"></vue-cropper>
+                <span slot="footer" class="dialog-footer">
+                    <el-button @click="cancelCrop">取 消</el-button>
+                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+                </span>
+            </el-dialog>
         </div>
     </div>
 </template>
 
 <script>
-    import VueCoreImageUpload  from 'vue-core-image-upload';
+    import VueCropper  from 'vue-cropperjs';
     export default {
         data: function(){
             return {
-                src: './static/img/img.jpg',
-                fileList: []
+                defaultSrc: './static/img/img.jpg',
+                fileList: [],
+                imgSrc: '',
+                cropImg: '',
+                dialogVisible: false,
             }
         },
         components: {
-                VueCoreImageUpload
+            VueCropper
         },
         methods:{
+            setImage(e){
+                const file = e.target.files[0];
+                if (!file.type.includes('image/')) {
+                    return;
+                }
+                const reader = new FileReader();
+                reader.onload = (event) => {
+                    this.dialogVisible = true;
+                    this.imgSrc = event.target.result;
+                    this.$refs.cropper && this.$refs.cropper.replace(event.target.result);
+                };
+                reader.readAsDataURL(file);
+            },
+            cropImage () {
+                this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
+            },
+            cancelCrop(){
+                this.dialogVisible = false;
+                this.cropImg = this.defaultSrc;
+            },
             imageuploaded(res) {
                 console.log(res)
             },
@@ -61,6 +89,9 @@
                     message: '图片上传接口上传失败，可更改为自己的服务器接口'
                 });
             }
+        },
+        created(){
+            this.cropImg = this.defaultSrc;
         }
     }
 </script>
@@ -73,9 +104,37 @@
         font-size: 22px;
         color: #1f2f3d;
     }
-    .pre-img{
-        width:250px;
-        height: 250px;
-        margin-bottom: 20px;
+    .pre-img{   
+        width: 100px;
+        height: 100px;
+        background: #f8f8f8;
+        border: 1px solid #eee;
+        border-radius: 5px;
+    }
+    .crop-demo{
+        display: flex;
+        align-items: flex-end;
+    }
+    .crop-demo-btn{
+        position: relative;
+        width: 100px;
+        height: 40px;
+        line-height: 40px;
+        padding: 0 20px;
+        margin-left: 30px;
+        background-color: #409eff;
+        color: #fff;
+        font-size: 14px;
+        border-radius: 4px;
+        box-sizing: border-box;
+    }
+    .crop-input{
+        position: absolute;
+        width: 100px;
+        height: 40px;
+        left: 0;
+        top: 0;
+        opacity: 0;
+        cursor: pointer;
     }
 </style>
